CSS 属性セレクタと擬似要素を指定する方法

2023年2月26日

環境
Google Chrome　109.0.5414.120
Windows 10 Home 64bit

構文
属性セレクタ:疑似要素
例p[class="pB"]::before
属性セレクタp[class="pB"]の後に、擬似要素の::beforeを指定しています。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
/*属性セレクタp[class="pB"]の後に、擬似要素の::beforeを指定*/
p[class="pB"]::before {
      content:"study"; 
      background-color:blue;
}
</style>
</head>
<body>

<p class="pA">東京</p>
<p class="pB">大阪</p>

</body>
</html>

実行結果
「大阪」という文字の前に「study」という文字が追加され背景色が青になっています。

CSS

Posted by arkgame