Edit line thickness of CSS 'underline' attribute

html css
user818700 picture user818700 · Dec 12, 2012 · Viewed 231.8k times · Source

Since you can underline any text in CSS like so:

h4 {
    text-decoration: underline;
}

How can you also then edit the 'line' that is drawn, the color you get on the line is easily specified as color: red but how does one edit the height of the line, i.e. the thickness?

Answer

Pranav 웃 picture Pranav 웃 · Dec 12, 2012

Here is one way of achieving 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/

Related questions

How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More
How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More