A simple way to underline single-line links

In a recent digest with fresh materials from the world of the frontend, I saw a selection of ways to underline in CSS .

It is strange that in such a good selection is not specified a simple way using a pseudo-class: after.



The advantages of this method:
+ Ease of use;
+ Wide options for settings (positioning, style, thickness, line color);
+ Works on any background;
+ Does not depend on the change of scale (if the text remains single-line)

Minuses:
- Not suitable for underlining multi-line text;
')
Perhaps there are some other disadvantages. I would be grateful for the tips.

<span class='inline-block decorated-link'>    {display: inline-block;} </span> <br> <br> <a href='#' class='decorated-link'> </a> 

 .decorated-link { color: #337ab7; position: relative; text-decoration: none; cursor: pointer; } .decorated-link:hover { text-decoration: none; color: red; } .decorated-link:after { content: ''; position: absolute; right: 0; left: 0; bottom: 1px; width: 100%; border-bottom: thin dashed rgba(51, 122, 181, 0.4); } .decorated-link:hover:after { border-color: rgba(255, 0, 0, 0.3);; } a.decorated-link:after { bottom: 0; } .inline-block { display: inline-block; }