CSS 属性セレクタと擬似要素(::before)を指定するサンプル
環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit
構文
属性セレクタ 疑似要素
属性セレクタと擬似要素を指定します。
div[class=クラス名]::before{CSSコード}
属性セレクタp[class=クラス名]の後に、擬似要素の::beforeを指定しています。
使用例
<!DOCTYPE html>
<html>
<head>
<style>
/*属性セレクタと擬似要素を指定*/
div[class="pB"]::before {
content:"都市";
background-color:skyblue;
color:red;
}
</style>
</head>
<body>
<div class="pA">tokyo</div>
<div class="pB">oosaka</div>
</body>
</html>
結果
文字「oosaka」の前に「都市」という文字が追加されます。
文字「都市」の背景色がskyblueになります。