How to change underline thickness of an a-tag without using border?

Question

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?

Answer 1

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>