Dashed Line - Heading

[Queckezz]

Hallo,
Ich versuche sowas zu verwirklichen:

<-- Bild anklicken ;)

Also eine gestrichelte Linie vertikal vom text zentriert. Diese Linie endet wenn Text davor ist und beginnt wieder wenn der Text zuende ist.

Habe bis jetzt keinen Ansatz gefunden wie sowas funtioniert. Ich hoffe da kann mir Beistand leisten


Queckezz

 

[threadi]

Spontaner Einfall:

<p><span>Hier der Text</span></p>

p { 
 border-top: 1px dashed #000; 
}
p span {
 position: relative;
 top: -10px;
 line-height: 20px;
}

 

[Queckezz]

Danke dir, ist zwar nicht genau die Antwort auf meine Frage aber mit diesem Ansatz habe ich es nun fertigstellen können

In deinem Beispiel geht die Linie durch den Text und nicht so wie im Bild oben gezeigt.
Fertige Lösung:

h2
  text-align center
  text-transform uppercase
  font-size 150%  
  border-top 1px dashed #ccc


  span
    padding 0px 10px
    background-color colorWhite
    position relative
    top -12px

Einfach einen weissen Hintergrund über die dashed-Line gelegt.

Benutze Stylus mit Node.js darum keine Doppelpunkte, Semikolons und curly Brackets(?). Auch Variablen setzen ist möglich.


Queckezz