A simple way to underline single line links
In a recent digest with fresh materials from the world of the front-end, I saw a selection of ways to underline CSS .
It is strange that such a good collection does not indicate a simple method using the: after pseudo-class.
Advantages of this method:
+ Ease of use;
+ Ample opportunities for settings (positioning, style, thickness, line color);
+ Works on any background;
+ Does not depend on zooming (if the text remains single-line)
Cons:
- Not suitable for underlining multi-line text;
Perhaps there are some other disadvantages. I would be grateful for the tips.
It is strange that such a good collection does not indicate a simple method using the: after pseudo-class.
Advantages of this method:
+ Ease of use;
+ Ample opportunities for settings (positioning, style, thickness, line color);
+ Works on any background;
+ Does not depend on zooming (if the text remains single-line)
Cons:
- Not suitable for underlining multi-line text;
Perhaps there are some other disadvantages. I would be grateful for the tips.
<spanclass='inline-block decorated-link'>Ссылка в спане с {display: inline-block;} </span><br><br><ahref='#'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;
}