Comment souligner une partie d'un en-tête (premier 40px par exemple)?

Question

Est-il possible en CSS simple d'avoir un en-tête souligné en partie seulement, en particulier 50px sur la gauche?

Answer 1

Vous pouvez utiliser l'élément pseudo :before et ajouter une bordure à elle.

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>

Answer 2

Utilisez un pseudo-element:

h1 { 
 
    position: relative; 
 
} 
 
h1::before { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; left: 0; 
 
    width: 50px; 
 
    height: 2px; 
 
    background-color: green; 
 
}

<h1>foobar</h1>

Answer 3

Vous pouvez ajouter un élément pseudo contenant deux espaces insécables qui sont soulignés. De cette façon, vous obtenez un vrai soulignement au lieu d'une frontière. Cependant, il va encore traverser des lettres comme "g".

h1::before { 
 
    content:'\a0\a0\a0\a0\a0\a0\a0\a0'; 
 
    display:block; 
 
    position:absolute; 
 
    text-decoration:underline; 
 
    width:50px; 
 
    overflow:hidden; 
 
}

<h1>Headline</h1> 
 
<h1>Another Headline</h1>