8

I often use a-tags for buttons, so they have a padding that makes them button like.

How do I change the thickness of the text-decoration underline? People often recommend to use a border-bottom for this, but

  • A bottom border is something else than underlining, some letters even extend below an underline. Underlining is far more sophisticated than a line below something.
  • I already use the padding of the elements in question as explained.

I have tried to use a a:hover:after selector to actually have a border-bottom anyway. It seems like css is not giving me a lot of alternatives like text-decoration-underline-height or something similar.

I will then in some way alter the height of that pseudo element to emulate underlining without having a one centimeter distance from the text to the "underline".

It doesn´t seem like the :after pseudo-tag is created using this css-selector. Some have managed to do this, but I do not. So there is nothing to create the hateful border-bottom in.

How do I proceed? Will a proper way of styling text-decoration: underline style underlining be added to css?

Until then, how to underline text using a line of desired thickness?

Anders Lindén
  • 6,839
  • 11
  • 56
  • 109
  • 4
    It's not possible without using border, or otherwise faking the underline. – APAD1 Dec 02 '15 at 16:15
  • 2
    According to [this](http://www.w3.org/TR/2013/WD-css-text-decor-3-20130103/#line-position), _CSS does not define the thickness of line decorations. In determining the thickness of text decoration lines, user agents may consider the font sizes, faces, and weights of descendants to provide an appropriately averaged thickness._ – Brian Ray Dec 02 '15 at 16:16
  • 1
    I've seen people use a background gradient – Kerstomaat Dec 02 '15 at 16:18
  • I don't understand why `box-shadow` or a background gradient is better than a simple border, that's more understandable and really wide customizable. – Marcos Pérez Gude Dec 02 '15 at 16:24
  • As a side note, the style of the underlines are defined in the typography and it's rendered automatically by the browser. – Marcos Pérez Gude Dec 02 '15 at 16:25
  • Border bottom is the most straightforward and easiest way my friend. – Throttlehead Dec 02 '15 at 16:29
  • @MarcosPérezGude the OP mentioned that they didn't want to use `border` because the letter descenders would not extend beyond the border. – APAD1 Dec 02 '15 at 16:33
  • [**Links are not buttons**](http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/) – Paulie_D Dec 02 '15 at 16:34
  • @Jacob still don't understand. The same effect you will achieve with box-shadow than the border. However, I agree with @Paulie_D it's better styling ` – Marcos Pérez Gude Dec 02 '15 at 16:36
  • On the contrary, links are often used as buttons @Paulie_D – Anders Lindén Dec 03 '15 at 07:23
  • Just because they are *used* as buttons doesn't make it right, – Paulie_D Dec 03 '15 at 10:13
  • 2
    Possible duplicate of [Edit line thickness of CSS 'underline' attibute](http://stackoverflow.com/questions/13840403/edit-line-thickness-of-css-underline-attibute) – Zach Saucier Jan 08 '17 at 23:41
  • Which is a possible duplicate of http://stackoverflow.com/questions/13612868/thickness-of-underline – Anders Lindén Jan 09 '17 at 09:04

3 Answers3

9

You could do this using the :after pseudo selector. One of the reasons you cited for not wanting to fake the underline was that you wanted descenders to extend below the underline. Well, you could just use a negative margin on the faked underline to accomplish that(notice how the descender of the p is overlapping the underline):

a {
  display:inline-block;
  text-decoration:none;
  color:red;
}
  a:hover {
    color:blue;
  }
    a:hover:after {
      background:red;
    }
  a:after {
    display:block;
    content:'';
    width:100%;
    height:4px;
    background:blue;
    margin-top:-2px;
  }
<a href="#">Sample link with descender</a>
APAD1
  • 13,509
  • 8
  • 43
  • 72
  • might be worth showing off using it with hover. a:hover:after {background:yellow;} – Andrew Bone Dec 02 '15 at 16:39
  • By only setting the background color in the a:hover:after rule and adjusting margin-top, (not changing color of the a-tag) I get an underline that is as close to the text as I want. Also, a good thing is that the underline is going beneath the text in z direction. – Anders Lindén Dec 03 '15 at 07:48
  • 1
    This is not a feasible solution to all cases as the text cannot wrap, any new lines will break the underline effect. – Alex Sep 19 '17 at 11:09
1

I tried using APAD1's method to create an underline and I spent at least 20 minutes thinking there was something wrong with how I was doing it. I couldn't get it to work at all on FireFox, so I came up with this method which worked like a charm for those who might be having trouble.

    a{
     display:inline-block;
     color:red;
     text-decoration:none;
     border-bottom:4px solid blue;
    }
    a:hover{
     color:blue;
     text-decoration:none;
     border-bottom:4px solid red;
    }
<a href="#">Sample underline</a>

You can also use the padding-bottom property to distance the border from the text. You can't pull it closer though, which I assume shouldn't be a problem since you aren't wanting it too close to begin with.

Jester
  • 141
  • 4
  • 15
0

You could consider using a box-shadow, like this:

a
{
  box-shadow: 0 5px 0 rgba(0,0,100, 0.5);
  text-decoration: none;
  padding-bottom: 5px;
}
<a href="#">My super link</a>
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

see definition: https://developer.mozilla.org/en/docs/Web/CSS/box-shadow

The downside of this solution is, that the outline is not clickable.

To overcome this, you can do something like this:

a
{
  box-shadow: 0 -5px  rgba(0,0,100, 0.5) inset;
  text-decoration: none;
  padding-bottom: 10px;
}
<a href="#">Totally clickable</a>
Nico O
  • 13,762
  • 9
  • 54
  • 69
  • 2
    Why box-shadow is better than a simple border? I don't understand what improvement is that – Marcos Pérez Gude Dec 02 '15 at 16:23
  • @MarcosPérezGude to be honest i misunderstood the question I guess. I thought the problem was the border pushing down the following content. I created a fiddle: https://jsfiddle.net/0krvtee3/ that show, that the border on inline elements behave differently than expted. So my "advantage" of a show being less disruptive to following element is not existing and your point is valid. Thanks for the heads up. One tiny advantage remains: you can alter the position of the shadow without having to deal with paddings (except for the all-clickable solution) – Nico O Dec 02 '15 at 16:36
  • 1
    is not your culprit. OP is asking for a simple thing that the correct answer should be: *"Default underline is rendered by the browser depending on the typography. The other techniques are the same and that's not an underline semantically correct"*. So your technique is good, don't matter about that :) – Marcos Pérez Gude Dec 02 '15 at 16:43