Verständnisproblem mit ::before

[Linuchs]

Hallo,

eine umfangreiche Webseite soll beim Drucken vor jedem Kapitel einen Seitenumbruch erhalten und auch die Überschrift der Webseite.

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. Das heisst, es hat das Layout vom h3. Und zweitens wird das <br> nicht ausgeführt, sondern mit vier Zeichen gedruckt.

Mit dem erstens kann ich ja leben, aber wie macht man da einen Zeilen-Umbruch?

Linuchs

[Martl]

Hallo Linuchs,

h3::before { display: block; content: "Sonntag, 2. August 2016"; }

Grüße, Martl

[Linuchs]

Hallo Martl,

h3::before { display: block; content: "Sonntag, 2. August 2016"; }

Das ist der richtige Tipp.

Linuchs

[Auge]

Hallo

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. Das heisst, es hat das Layout vom h3.

Works as intended.

Die Pseudoelemente ::before und ::after erzeugen ein beliebig formatierbares Element, das innerhalb des angesprochenen Elements vor bzw. nach dem tatsächlich vorhandenen Inhalt eingefügt wird.

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

Es wäre mir neu, dass in Pseudoelementen HTML-Elemente notiert werden dürfen.

Mit dem erstens kann ich ja leben, aber wie macht man da einen Zeilen-Umbruch?

Der Punkt „Beachten Sie“ im oben verlinkten Dokuartikel lässt mich vermuten, dass man mit display herumspielen kann.

Tschö, Auge

[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 🖖

[Auge]

Hallo

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.

Mal zählen:

1. „<“
2. „b“
3. „r“
4. „>“

Das macht Summa Summarum vier Zeichen. Ohne nicht vorhandene Umbrüche werden die aller Wahrscheinlichkeit nach als „<br>“ dargestellt. Works ebenfalls as designed.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

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.

Mal zählen:

1. „<“
2. „b“
3. „r“
4. „>“

Das macht Summa Summarum vier Zeichen.

Jaja. Ich hatte „mit vier Leerzeichen gedruckt“ gelesen. Das lässt sich mit akutem Eismangel erklären.[^1]

Und natürlich will Linuchs auch keinen Zeilenumbruch, sondern das Pseudoelement als Block stylen.

LLAP 🖖

[Auge]

Hallo

Jaja. Ich hatte „mit vier Leerzeichen gedruckt“ gelesen. Das lässt sich mit akutem Eismangel erklären.

Damit lässt sich zur Zeit so ziemlich alles erklären. Das natürlich auch.

Und natürlich will Linuchs auch keinen Zeilenumbruch, sondern das Pseudoelement als Block stylen.

Das ist ja nun geklärt.

Tschö, Auge

[woodfighter]

Tach,

Das lässt sich mit akutem Eismangel erklären.

sag ich ja, können ja nicht alle aus Diamanten sein.

mfg
Woodfighter

[woodfighter]

Tach,

Nachtrag: Die Ausrede habe ich von woodfighter geklaut.

editieren statt ingridisieren ist unfair, das kann man in der Vorschau nicht sehen.

mfg
Woodfighter