I like an obedient frotend developer must create underline with 2px padding instead of 1px by default. Is exist simple solution for this?
PS Yeahh guys, I know about div
For cross-browsing it is better to use text-underline-offset
over the text-underline-position
, because text-underline-position
isn't supported by iOS Safari
So use this answer: https://stackoverflow.com/a/63607426/1894907
#line{
text-decoration-line: underline;
text-underline-offset: 2px;
}
how about using border-bottom:1px; padding:what-you-likepx
You could wrap the text in a span
and give it a border-bottom
with padding-bottom:2px;
.
Like so
span{
display:inline-block;
border-bottom:1px solid black;
padding-bottom:2px;
}
Example: http://jsfiddle.net/uSMGU/
I used @jake's solution, but it gave me trouble with the horizontal alignment.
My nav links are flex row, center aligned and his solution caused the element to shift upwards in order to stay horizontally center-aligned.
I fixed it by doing this:
a.nav_link-active {
color: $e1-red;
margin-top: 3.7rem;
}
a.nav_link-active:visited {
color: $e1-red;
}
a.nav_link-active:after {
content: '';
margin-top: 3.3rem; // margin and height should
height: 0.4rem; // add up to active link margin
background: $e1-red;
display: block;
}
This will maintain the horizontal alignment for you.
You can do this with a bit of a hack using ::after elements, and positioning them manually. This does mean that you have to maintain the content
attribute of the after element but you could make this easier by using a data attribute in the html tag and referring to it. See the example below -
span:after {
font-size: 1rem;
position: absolute;
content: 'Hello there..';
width: 100%;
height: 100%;
white-space: pre;
text-decoration-skip-ink: none;
text-decoration-line: underline;
left: 0px;
top: 10px;
color: white;
z-index: -1;
text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: black;
}
span {
position: relative;
}
<span>Hello there</span>
A great way to do this without adding and extra spans and having more control is using the :after
selector.
Useful especially for navigation menus:
.active a:after {
content: '';
height: 1px;
background: black;
display:block;
}
If you want more or less space between the text and the underline, add a margin-top
.
If you want a thicker underline, add more height
:
.active a:after {
content: '';
height: 2px;
background: black;
display:block;
margin-top: 2px;
}