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