Change CSS line thickness underline

Question

Since you can underline any text in CSS like this:

H4 {text-decoration: underline;} 

How can you then edit this "line" that is drawn, the color that you get on the line is easily indicated as "color: red", but how to edit the height of the line, that is, the thickness?

Any ideas?

Answer 1

Here is one way to achieve this:

HTML:

 <h4>This is a heading</h4> <h4><u>This is another heading</u></h4> 

CSS:

  u { text-decoration: none; border-bottom: 10px solid black; }​ 

Here is an example: http://jsfiddle.net/AQ9rL/

Answer 2

I recently had to deal with FF, which emphasized too fat and too far from the text in FF, and found a better way to handle it using a couple of boxes:

 .custom-underline{ box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black } 

The first shadow is placed on top of the second and that you can control the second by changing the "px" value for both.

Plus: various colors, thickness and underline

Minus: cannot be used on non-continuous background images

Here I made some examples: http://jsfiddle.net/xsL6rktx/

Answer 3

Very light ... an external "span" element with a small font and underline and a large font size inside the "font" element.

 <span style="font-size:1em;text-decoration:underline;"> <span style="font-size:1.5em;"> Text with big font size and thin underline </span> </span> 

Answer 4

Another way to do this is to use ": after" (pseudo-element) for the element you want to underline.

 h2{ position:relative; display:inline-block; font-weight:700; font-family:arial,sans-serif; text-transform:uppercase; font-size:3em; } h2:after{ content:""; position:absolute; left:0; bottom:0; right:0; margin:auto; background:#000; height:1px; } 

Answer 5

I will do something simple:

 .thickness-underline { display: inline-block; text-decoration: none; border-bottom: 1px solid black; margin-bottom: -1px; } 

• You can use line-height or padding-bottom to set between them
• You can use display: inline in some case

Demo: http://jsfiddle.net/5580pqe8/

Answer 6

Final Solution: http://codepen.io/vikrant-icd/pen/gwNqoM

 a.shadow { box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue; } 

Answer 7

My solution: https://codepen.io/SOLESHOE/pen/QqJXYj

 { display: inline-block; border-bottom: 1px solid; padding-bottom: 0; line-height: 70%; } 

You can adjust the position of the underline using the line height, underline thickness, and style with a lower border.

Beware of disabling the default underline behavior if you want to emphasize href.