css - 疑似要素のスタイリング部分

Question

:before および :after 疑似要素のコンテンツの一部だけで CSS スタイルをターゲットにする方法はありますか?

Answer 1

:before疑似要素のコンテンツが生成要素のコンテンツとともにインラインで表示される場合でも、ターゲットまたは:first-line個別にターゲットにすることができ、生成されたコンテンツの最初の行または文字をそれぞれ:first-letterオーバーライドする必要があります。:before

div {
    width: 100px;
}

div:before {
    content: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.';
}

div:first-line { font-weight: bold; }
div:first-letter { color: red; }

:beforeそれを超えると、CSS の一部または:after疑似要素を確実にターゲットにすることはできません。疑似要素は CSS2.1 で他の疑似要素を生成できず、実際の要素のみが生成できるためです。追加されたコンテンツの最初の文字のスタイルを設定する必要がある場合は、JavaScript を使用してそのコンテンツを最初に追加します。

Answer 2

疑似要素の一部と言ってもわかりません。スタイルをターゲットに:afterし:beforeてブロック要素として扱うには、基本的なものが必要です。

.element:after, .element:before {
    content: " ";
    display: block;
    width: 100px;
    height: 100px;
}