web-dev-qa-db-ja.com

疑似要素にCSSクラスを追加する

：afterのように、CSSクラスを疑似要素に追加する方法があるかどうか疑問に思いました。

：afterを使用してエラーメッセージを追加したいと思います。他のエラーメッセージと同じスタイルのエラーメッセージも必要です。

これは機能します：

.error:after {
  content: "Error Message";
  color: red;
}

しかし、私はこのようなことをしてカラースタイリング以上のものを追加できますか？：

.error:after {
  content: "Error Message";
  class: error_message_styles;
}

また、「:: after」と「：after」の使用に違いはありますか？

前もって感謝します！

csspseudo-element
22
Zhao Li

あらゆる種類のHTML属性を疑似要素に与える方法はありません。

セレクターを2回使用するだけです。

.error:after {
  content: "Error Message";
}
.error:after, .error-style {
  color:red;
}

また、「:: after」と「：after」の使用に違いはありますか？

これによれば：

https://developer.mozilla.org/en/CSS/:after

::after表記は、疑似クラスと疑似要素の区別を確立するためにCSS 3で導入されました。ブラウザは、CSS 2で導入された表記:afterも受け入れます。

注：Microsoft Internet Explorer 8は：after表記のみをサポートしています。

エラーメッセージは装飾ではなく内容である可能性があると私は主張しますが、それはあなたの呼び出しです。

18
Wesley Murch

:after要素は物理的なDOM要素ではないため、クラスを取ることはできません。

[〜＃〜] less [〜＃〜] のようなスタイルシートライブラリを使用する場合、クラスをプロパティとして含めることにより、他のクラスのスタイルを混在させることができます。

.error {
    .error-styles;
}
3
JoeJ