CSS unterstreichen weniger als Breite der Überschrift?

Question

Ist es mit CSS möglich, die Überschrift einer Überschrift weniger breit zu streichen als der Überschriftstext? Ich habe den folgenden Stil für eine H1-Überschrift:

h1 { 
    font-weight: 300; 
    display: inline-block; 
    padding-bottom: 5px; 
    border-bottom: 1px #d2202f solid; 
} 

Dies erzeugt eine dünne rote Unterstreichung unterhalb meiner H1-Schlagzeilen. Ist es jedoch möglich, dass die Unterstreichung 50% des Textes in der Überschrift ausmacht?

Answer 1

Sie können ein Pseudoelement mit :before (oder :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/

Answer 2

Ja und nein.

Normale Rahmen können dies nicht, aber Sie können es mit einem CSS3-Farbverlauf vortäuschen.

See: CSS3 Gradient Borders