HTML CSS - Ligne horizontale à gauche et à droite d'un texte
HTML CSS
[24/05/2018] Ligne horizontale à gauche et à droite d'un texte
Embellissez vos titres
Voici une astuce toute simple pour mettre en valeur vos titres ou ce que vous voudrez.
Ajoutons un trait horizontal à gauche puis à droite de notre titre en CSS pour obtenir le résultat ci-dessus :
Libre à vous de modifier le tag de votre choix et l'image de fond pour agrémenter à votre goût ;-)
Ce code est visible en demo sur le standalone ici.
Bon code ;-)
Ajoutons un trait horizontal à gauche puis à droite de notre titre en CSS pour obtenir le résultat ci-dessus :
h1 {
display: table;
white-space: nowrap;
text-align: center;
}
h1:before, h1:after {
content: "";
display: table-cell;
width: 50%;
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=) repeat-x left center;
}
Libre à vous de modifier le tag de votre choix et l'image de fond pour agrémenter à votre goût ;-)
Ce code est visible en demo sur le standalone ici.
Bon code ;-)