Verständnisproblem mit ::before

[Gunnar Bittersmann]

@@Linuchs

Dieses CSS habe ich versucht:

 @media print {
  h2, h3 {
    page-break-before: always;
  }
  h3::before {
    content: "Sonntag, 2. August 2016<br>";
  }

Doch zwei Dinge verstehe ich nicht. Erstens wird der Text IN das h3-Tag eingegliedert und nicht davor.

Works as designed:

“[T]he :before and :after pseudo-elements specify the location of content before and after an element's document tree content.” [CSS 2.1] (Hervorhebung von mir)

Vor bzw. nach dem Element-inhalt, nicht vor bzw. nach dem Element.

Und zweitens wird das <br> nicht ausgeführt, sondern mit vier Zeichen gedruckt.

Das wundert mich jetzt. Ich hätte erwartet, dass "<br>" (als String) gedruckt erscheint.

Mit dem erstens kann ich ja leben

Du kannst aber auch Pseudoelemente stylen.

aber wie macht man da einen Zeilen-Umbruch?

Indem du das Unicode-Steuerzeichen für Zeilenumbruch verwendest – CSS-gerecht escapet. Im nächsten Abschnitt:

“Authors may include newlines in the generated content by writing the "\A" escape sequence in one of the strings after the 'content' property.” [CSS 2.1]

Aber: “This inserted line break is still subject to the 'white-space' property.”

LLAP 🖖