web-dev-qa-db-fra.com

CSS souligner moins que la largeur du titre?

Est-il possible avec CSS de rendre le soulignement d'un titre moins large que le texte du titre? J'ai le style suivant pour un titre H1:

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

Cela produit un mince soulignement rouge sous mes titres H1. Cependant, est-il possible de faire en sorte que le soulignement représente 50% du texte dans le titre?

cssunderline
13
therealbiglou

Vous pouvez utiliser un pseudo-élément avec :before (ou :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/

41
James Montagne

Oui et non.

Les bordures normales ne peuvent pas faire cela, mais vous pouvez les simuler avec une bordure de dégradé CSS3.

Voir: Bordures de dégradé CSS

2
Diodeus - James MacFarlane