Entourer les titres de deux tirets latéraux en css

Bien des articles ont été rédigés sur la facon d’obtenir deux tirets latéraux autour d’un texte, un titre, comme ici

titre

Cet article ci montre les différentes solutions en cours pour parvenir à ce résultat

Tous ont des inconvénients ou des avantages, mais le plus adaptable quelque soit la taille du texte reste cet exemple ci:

.title-container{ overflow: hidden;
  text-align: center;}
 
.highlight{
  display: inline-block;
  padding: 0 15px;
  position: relative;
}

.highlight:before,
.highlight:after {
  background: #000;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
    top: 50%;
  width: 50%;
}
.highlight:before {
  right: 100%;
}
.highlight:after {
  left: 100%;
}

c’est lexemple 2 « 2: INLINE BLOCK HEADING WITH CONTAINER » de la page citée.En fait, tous les autres sont limités des qu’on touche au code, des qu’on agrandit par exemple la police du titre, ou qu’on joue sur les marges.Cet exemple a l’avantage de s’adapter quelque soit la taille du titre.

On va voir dans cet article comment appliquer ce style dynamiquement à nos titres dans wordpress, à l’aide d’un shortcode.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.