html - CSSデータ属性改行文字＆疑似要素コンテンツ値

Question

データ属性に改行を入れることはできますか?

私はこのようなことをしようとしています:

CSS:

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

HTML

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

「\a」は CSS の改行であることがわかりましたが、それでもうまくいきません。

Answer 1

属性値内で単純な改行を使用できます。

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

ブラウザーはこの点でバグが多く、HTML 仕様はこれについて明確ではありませんでした。彼らは、要素のコンテンツ(スペースと同等と見なされている)の改行の意味については説明していますが、属性値については説明していません。HTML5 CR では、属性値の解析規則により、属性値に単純に改行が追加されることが明確になります。最近のブラウザは、一般にこのようなルールに従っています。

ただし、 を介して CSS で値を使用する場合、attr(...)通常、改行はスペースと同等に扱われるためwhite-space、疑似要素に、改行を有効にする値、つまりpre、pre-wrap、またはを設定する必要がありますpre-line。

PS HTML では、表記\aは 2 つのデータ文字だけで、特別な意味はありません。表記
は改行 (具体的には LINE FEED) を示しますが、ソース内の実際の改行と同じです。