Geek Answers Handbook

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

I often use tags for buttons, so they have padding that makes them such buttons.

How to change the thickness of the underline of the text? People often recommend using border-bottom for this, but

  • The lower border is something other than an underline, some letters even go under the underline. The underline is much more complicated than the line below.
  • I already use the padding of the items in question as described.

I tried using a:hover:after selector to actually have border-bottom. Css doesn't seem to give me many alternatives like text-decoration-underline-height or something like that.

Then I will somehow change the height of this pseudo-element to emulate the underline, without having a single centimeter from the text to the underline.

This is not like: after creating a pseudo-tag using this css selector. Some managed to do this, but I do not. Thus, there is nothing to create a hated border bottom.

How do I proceed? Will the correct text-decoration: underline styling style be added in css?

As long as how to emphasize the text using the string of the desired thickness?

+6
source share
3 answers

You can do this using : after the pseudo selector . One of the reasons you indicated that you didn’t want to fake underscores was because you wanted descenders to expand below the underscore. Well, you can simply use negative margin on false underscores to accomplish this (note how the descender from p overrides the underscore):

 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>
+7
source

You can use box-shadow , for example:

 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 disadvantage 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>
0
source

I tried using the APAD1 method to create the underline, and I spent at least 20 minutes thinking that something was wrong with the way I did it. I couldn’t make it work at all on FireFox, so I came up with this method, which worked like a charm for those who might have problems.

  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 remove the border from text. You cannot pull it closer, although I suppose this is not a problem because you do not want it to be too close to begin with.

0
source

More articles:


All Articles