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

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.