CSS Underline Less Than Width of Headline

CSS underline less than width of headline?

You can use a pseudo element with :before (or :after):

h1 {
    font-weight: 300;
    display: inline-block;
    padding-bottom: 5px;
    position: relative;
}
h1:before{
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: 0;
    left: 25%;
    border-bottom: 1px solid red;
}

http://jsfiddle.net/9e27b/

How to underline part of a heading (first 40px for instance)?

You can use the :before pseudo element and add a border to it.

h1 {  position: relative;  line-height: 1.2em;}h1:before {  position: absolute;  left: 0;  top: 1.2em;  height: 0;  width: 50px;  content: '';  border-top: 1px solid red;}

<h1>This is a header, partly underlined</h1>

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/

Smaller underline effect

try this one - http://jsbin.com/lumasive/1/

#navigation li a { position:relative; }
#navigation li a:after {
      content: '';
      position:absolute;
      bottom:0;
      left: 30%;
      right: 30%;
      height: 2px;
      background:red;
      display:block;
}

Border length smaller than div width?

You can use pseudoelements. E.g.

div {  width   : 200px;  height  : 50px;     position: relative;  z-index : 1;  background: #eee;}
div:before {  content : "";  position: absolute;  left    : 0;  bottom  : 0;  height  : 1px;  width   : 50%;  /* or 100px */  border-bottom:1px solid magenta;}

<div>Item 1</div><div>Item 2</div>

Border length smaller than div width?

You can use pseudoelements. E.g.

div {  width   : 200px;  height  : 50px;     position: relative;  z-index : 1;  background: #eee;}
div:before {  content : "";  position: absolute;  left    : 0;  bottom  : 0;  height  : 1px;  width   : 50%;  /* or 100px */  border-bottom:1px solid magenta;}

<div>Item 1</div><div>Item 2</div>

custom underline goes over whole width (css)

Add the following into your stylesheet:

h1 { display: inline-block; }

This will make the width of h1 only as wide as needed for its contents, as opposite to the default 100% width. But note this this also removes the default top and bottom margin of the element, so you may wish to set `margin-top' on the next element.

CSS Underline Less Than Width of Headline