Zeilenumbrüche in CSS-Pseudoelementen mit Attributselektor

Question

Also habe ich versucht, einen Zeilenumbruch in einem After-Element zu bekommen, und ich habe (was ich denke) ist eine interessante Eigenart.

Dies funktioniert, wie ich möchte, und ich bekomme einen Zeilenumbruch vor dem Inhalt aus dem Attribut.

Wie auch immer, wenn ich gehe, um den Inhalt vollständig aus dem Attr zu bekommen, hören die Zeilenumbrüche auf zu rendern.

#fifth figcaption:before 
{ 
    content: attr(title); 
    white-space: pre-wrap; 
} 

können Sie sehen dies hier>http://jsbin.com/huyaxifomo/edit?html,css,output

Weiß jemand, warum dies würde einen Unterschied machen? Danke im Voraus.

Answer 1

Wenn Sie \A oder \a oder etwas ähnliches als Wert zu Ihrem HTML-Attribut verwenden, ist nur ein statischer Wert. Mit so etwas wie in Ihrem CSS folgenden wird nicht analysieren solche Syntax für Ihre content Eigenschaft

<div data-stuff="Hello \a World"></div> 

und CSS wie

content: attr(title); 
/* 
    This will not parse \a as a line break and would rather treat it as 
    a string. 
*/ 

Wenn Sie Zeilenumbrüche von CSS hinzufügen möchten, müssen Sie erklären \A in Ihrem Stylesheet und nicht das HTML-Attribut. Daher, so etwas wie

content: attr(title) '\A World'; /* works now, as your \A will be parsed by CSS */