Edit Line Thickness of CSS 'Underline' Attribute

Edit line thickness of CSS 'underline' attribute

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/

How to change width of underline in css

use border-bottom define color cording like this

b {    border-bottom: 1px solid red;    padding: 0 0 4px;}

<td><b>Grand Total</b></td>

Text-Decoration: underline has undocumented line thickness property

The thickness can be controlled with: text-decoration-thickness property.

The color of the with: text-decoration-color property.

h1 {
  text-decoration: underline;
  text-decoration-thickness: 50px;
  text-decoration-color: red;
}

<h1>Our Elixirs</h1>

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

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>

How can I change the thickness of my hr tag

For consistency remove any borders and use the height for the <hr> thickness. Adding a background color will style your <hr> with the height and color specified.

In your stylesheet:

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
}

Or inline as you have it:

<hr style="height:1px;border:none;color:#333;background-color:#333;" />

Longer explanation here

Setting Underline Thickness in CSS

You can turn your paragraph into an inline display: DEMO

This way you can even set a border-style to your underline'like:

p {
  display:inline;
  border-bottom:3px double;
}

Single <p>aragraphs in between title

---

Related Topics