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

Ligne horizontale à gauche et à droite d'un texte

Voici une astuce toute simple pour mettre en valeur vos titres ou ce que vous voudrez.
 
Ligne horizontal pour titre a gauche et a droite en CSS

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.

DEMO

Bon code ;-)

 

© 2005 - 2019 • INFORMATUX