CSS: Line-Title

Letzthin habe ich eine interessante Art von Titeln gesehen, nämlich so:

Dies ist ein solcher Line-Title

Auf dieser Seite gibts verschiedene Anleitungen dazu.

Ich habe das (auf obiger Seite basierend und ein wenig angepasst) so gemacht:

CSS:

p.lt { 
  font-family: "Times New Roman", Georgia, Serif; 
  font-size:1.5rem; 
  color:red; 
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
  text-align: center; } 
p.lt:before, p.lt:after { 
  background-color: red; 
  content: '\a0'; 
  flex-grow: 1; 
  height: 1px; 
  position: relative; 
  top: 1.3rem; } 
span.lt { 
  border: 1px solid red; 
  padding-left: 10px; 
  padding-right: 10px }

Im Text:

<p class="lt"><span class="lt">Dies ist ein solcher Line-Title</span></p>

Bemerkung: Der <span> macht den Rahmen, will man den nicht, span einfach weglassen, dann kommt so:

Dies ist ein solcher Line-Title

Uiuiui – jetzt fehlt links und rechts der Abstand zur Linie.

Dies kann so erreicht werden, im CSS:

p.lt:before { margin-right:10px; } 
p.lt:after { margin-left:10px; }

fertig.