CSS données d'attribut de caractère de nouvelle ligne & pseudo-élément de contenu de la valeur

Est-il possible d'avoir une nouvelle ligne dans un attribut de données ?

Je suis en train de faire quelque chose comme ceci:

CSS:

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
}

HTML

<div data-foo="First line \a Second Line">foo</div>

J'ai trouvé que "\a" est une nouvelle ligne dans le CSS, mais ne fonctionne toujours pas pour moi.

  • \a fonctionne si vous placer directement dans la content: "First line \a Second Line"; mais apparemment pas si vous tirez dans la via attr(). Wow, c'est une question intéressante!
  • J'ai créé une démo pour tester les deux solutions: la plaine de saut de ligne, et &#xa; entité. codepen.io/denilsonsa/stylo/bgxKgP Résumé: les deux solutions fonctionnent sur tous les navigateurs (Chrome, Firefox, Safari 9+, c'est à dire 11+).
InformationsquelleAutor Snaker.Wood | 2013-05-08