CSS 属性セレクタと擬似要素を指定する方法
環境
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>
<!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>
<!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」という文字が追加され背景色が青になっています。