[CSS]属性セレクタと擬似要素を設定するサンプル

2014年8月6日2021年9月9日

構文
div[class=クラス名]::before{cssコード}
div[class=クラス名]::after{cssコード}
属性セレクタ::擬似要素

使用例

<style>
/* div[class=セレクタ名]::beforeの定義*/
div[class="cftA"]::before {
      content:" start  "; 
    color:red;
    background-color:skyblue;
}
/* div[class=セレクタ名]::afterの定義*/
div[class="cftB"]::after {
      content:" end  "; 
    color:gold;
    background-color:skyblue;
}
</style>

<!--クラスcftAを使用 -->
<div class="cftA">擬似要素の::beforeを指定</div>
<!--クラスcftBを使用 -->
<div class="cftB">擬似要素の::afterを指定</div>