Update 2019: The CSS Working Group has published a draft for text decoration level 4 which would add a new property text-underline-offset
(as well as text-decoration-thickness
) to allow control over the exact placement of an underline. As of this writing, it's an early-stage draft and has not been implemented by any browser, but it looks like it will eventually make the technique below obsolete.
Original answer below.
The problem with using border-bottom
directly is that even with padding-bottom: 0
, the underline tends to be too far away from the text to look good. So we still don't have complete control.
One solution that gives you pixel accuracy is to use the :after
pseudo element:
a {
text-decoration: none;
position: relative;
}
a:after {
content: '';
width: 100%;
position: absolute;
left: 0;
bottom: 1px;
border-width: 0 0 1px;
border-style: solid;
}
By changing the bottom
property (negative numbers are fine) you can position the underline exactly where you want it.
One problem with this technique to beware is that it behaves a bit weird with line wraps.
If you are using text-decoration: underline;
, then you can add space between underline and text by using text-underline-position: under;
For more The text-underline-position properties, you can have look here
You can use this text-underline-position: under
See here for more detail: https://css-tricks.com/almanac/properties/t/text-underline-position/
See also browser compatibility.
See my fiddle.
You would need to use the border width property and the padding property. I added some animation to make it look cooler:
body{_x000D_
background-color:lightgreen;_x000D_
}_x000D_
a{_x000D_
text-decoration:none;_x000D_
color:green;_x000D_
border-style:solid;_x000D_
border-width: 0px 0px 1px 0px;_x000D_
transition: all .2s ease-in;_x000D_
}_x000D_
_x000D_
a:hover{_x000D_
color:darkblue;_x000D_
border-style:solid;_x000D_
border-width: 0px 0px 1px 0px;_x000D_
padding:2px;_x000D_
}
_x000D_
<a href='#' >Somewhere ... over the rainbow (lalala)</a> , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a <i><a href="#">what a wonder-ful world!</a> World!</i>
_x000D_
What I use:
<span style="border-bottom: 1px solid black"> Enter text here </span>
An alternative for multiline texts or links, you can wrap your texts in a span inside a block element.
<a href="#">
<span>insert multiline texts here</span>
</a>
then you can just add border-bottom and padding on the <span>
.
a {
width: 300px;
display: block;
}
span {
padding-bottom: 10px;
border-bottom: 1px solid #0099d3;
line-height: 48px;
}
You may refer to this fiddle. https://jsfiddle.net/Aishaterr/vrpb2ey7/2/
@last-child's answer is a great answer!
However, adding a border to my H2 produced an underline longer than the text.
If you're dynamically writing your CSS, or if like me you're lucky and know what the text will be, you can do the following:
change the content
to something the right length (ie the same
text) set the font color to transparent
(or rgba(0,0,0,0)
)
to underline <h2>Processing</h2>
(for example),
change last-child's code to be:
a {
text-decoration: none;
position: relative;
}
a:after {
content: 'Processing';
color: transparent;
width: 100%;
position: absolute;
left: 0;
bottom: 1px;
border-width: 0 0 1px;
border-style: solid;
}
I was able to Do it using the U (Underline Tag)
u {
text-decoration: none;
position: relative;
}
u:after {
content: '';
width: 100%;
position: absolute;
left: 0;
bottom: 1px;
border-width: 0 0 1px;
border-style: solid;
}
<a href="" style="text-decoration:none">
<div style="text-align: right; color: Red;">
<u> Shop Now</u>
</div>
</a>
Here is what works well for me.
<style type="text/css">_x000D_
#underline-gap {_x000D_
text-decoration: underline;_x000D_
text-underline-position: under;_x000D_
}_x000D_
</style>_x000D_
<body>_x000D_
<h1 id="underline-gap"><a href="https://Google.com">Google</a></h1>_x000D_
</body>
_x000D_
just use
{
text-decoration-line: underline;
text-underline-offset: 2px;
}
If you want:
underline, you can use 1 pixel height background image with repeat-x
and 100% 100%
position:
display: inline;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%;
You can replace the second 100%
by something else like px
or em
to adjust the vertical position of the underline. Also you can use calc
if you want to add vertical padding, e.g.:
padding-bottom: 5px;
background-position-y: calc(100% - 5px);
Of course you can also make your own base64 png pattern with another color, height and design, e.g. here: http://www.patternify.com/ - just set square width & height at 2x1.
Source of inspiration: http://alistapart.com/article/customunderlines
I know it's an old question, but for single line text setting display: inline-block
and then setting the height
has worked well for me to control the distance between a border and the text.
This is what i use:
html:
<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>
css:
.horizontal-line { border-bottom: 2px solid #FF0000; padding-bottom: 5px; }
Getting into the details of the visual style of text-decoration:underline
is pretty much futile, so you're going to have to go with some kind of hack the removes text-decoration:underline
and replaces it with something else until a magical far-distant future version of CSS gives us more control.
This worked for me:
a {_x000D_
background-image: linear-gradient(_x000D_
180deg, rgba(0,0,0,0),_x000D_
rgba(0,0,0,0) 81%, _x000D_
#222222 81.1%,_x000D_
#222222 85%,_x000D_
rgba(0,0,0,0) 85.1%,_x000D_
rgba(0,0,0,0)_x000D_
);_x000D_
text-decoration: none;_x000D_
}
_x000D_
<a href="#">Lorem ipsum</a> dolor sit amet, <a href="#">consetetur sadipscing</a> elitr, sed diam nonumy eirmod tempor <a href="#">invidunt ut labore.</a>
_x000D_
Here's a version with all the proprietary properties for some backwards compatibility:
a {
/* This code generated from: http://colorzilla.com/gradient-editor/ */
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 81%, rgba(0,0,0,1) 81.1%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(81%,rgba(0,0,0,0)), color-stop(81.1%,rgba(0,0,0,1)), color-stop(85%,rgba(0,0,0,1)), color-stop(85.1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* W3C */
text-decoration: none;
}
Update: SASSY version
I made a scss mixin for this. If you don't use SASS, the regular version above still works great...
@mixin fake-underline($color: #666, $top: 84%, $bottom: 90%) {
background-image: linear-gradient(
180deg, rgba(0,0,0,0),
rgba(0,0,0,0) $top,
$color $top + 0.1%,
$color $bottom,
rgba(0,0,0,0) $bottom + 0.1%,
rgba(0,0,0,0)
);
text-decoration: none;
}
then use it like so:
$blue = #0054a6;
a {
color: $blue;
@include fake-underline(lighten($blue,20%));
}
a.thick {
color: $blue;
@include fake-underline(lighten($blue,40%), 86%, 99%);
}
Update 2: Descenders Tip
If you have a solid background color, try adding a thin text-stroke
or text-shadow
in the same color as your background to make the descenders look nice.
Credit
This is simplified version of the technique I originally found at https://eager.io/app/smartunderline, but the article has since been taken down.
Source: Stackoverflow.com