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

2022年11月6日

環境
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になります。

CSS

Posted by arkgame

関連投稿: