CSS　属性セレクタと擬似要素を指定するサンプル

2022年12月1日

環境
Google Chrome　107.0.5304.122（Official Build）（64 ビット）
Windows 10 Home 64bit
構文
属性セレクタ::疑似要素
属性セレクタと擬似要素を指定します。
p[class="クラス名"]::after
属性セレクタp[class="クラス名"]の後に、擬似要素の::afterを指定しています。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
p[class="pB"]::after {
      content:" 詳細 "; 
      color:blue;
}
</style>
</head>
<body>
<p class="pA">東京</p>
<p class="pB">大阪</p>
</body>
</html>

結果
文字「大阪」の後ろに「詳細」文字が追加され色が青になっています。

CSS

Posted by arkgame