Komplexes Layout ohne zusätzliches Markup

[Gunnar Bittersmann]

@@Rolf B

Das hier sieht so aus wie gewünscht, aber ist es auch gut so?

Die Linien mit linear-gradient – hm, das ist ein Hack. Das sollte anders gehen.

Ich hatte erst im Sinn, die Höhe des Pseudoelements auf eins, zwei Pixel festzulegen und die Linien mit border-left und border-right zu erzeugen. Das Anführungszeichen wird in seiner vollen Pracht auch außerhalb der Box des Pseudoelements dargestellt. Mir ist es nur nicht gelungen, das Ding vertikal passend zu den Linien auszurichten.

SVG zur Hilfe! Damit kriegt man schnell zwei Linien hin und auch das Anführungszeichen dazwischen. ☞ So sieht’s aus.

Die Anführungszeichen werden entsprechend der Sprache gedreht: „“ für Deutsch, “” für Englisch, …

LLAP 🖖