Probleme mit Positionierung von Pseudo-Element

[Gunnar Bittersmann]

@@heinetz

Die Lösung mit dem Unterstrich gefällt mir auch sehr gut. Damit verhält sich die Linie genau wie Text. Allerdings hat man dann nicht mehr so direkten Einfluss auf die Grösse des Strichs.

Hast du doch: Mit der Schriftgröße des Pseudoelements legst du die Strichdicke fest. Danach legst du mit der Anzahl der NBSP bzw. '_' grob die Breite fest. Dann geht’s ans Finetuning: Mit (dem Nachkomma-Anteil) der Schriftgröße kannst du die Breite ändern, ohne dass sich die Strichdicke merklich ändert.

Du hättest aber lieber eine Möglichkeit, Strichdicke und Breite direkt anzugeben? Dem Ingenör ist nichts zu schwör. content kann statt einer Zeichenkette auch einen URL einer Grafik als Wert haben; SVG bietet sich an – mit width und height. Kann auch als Data-URL im Stylesheet sein. Da muss nichts drin sein, nur Hintergrundfarbe. Nur dass die Farbe im SVG angegeben werden muss und nicht die Textfarbe der Überschrift übernehmen kann. Oder ginge das auch irgendwie?

Jetzt ha’m wa’s aber: ☞ Codepen

LLAP 🖖