「CSS」疑似クラスと疑似要素を設定するサンプル
書式
疑似クラス::疑似要素
擬似クラス a:link
擬似要素 ::before
使用例
<style>
/*擬似クラスのa:lilnk 擬似要素の::before*/
a:link::before {
border: 1px solid blue;
color: yellow;
content:"情報表示 ";
background-color:LightSkyBlue;
}
/*擬似クラスのa:lilnk 擬似要素の::before*/
/* WebKit browsers */
a:-webkit-any-link::before {
border: 1px solid blue;
color: yellow;
}
</style>
<a href="javascript:void(0)">AAA 111</a><br>
<a href="#">BBB 222</a><br>
<a>擬似クラスと擬似要素のサンプル</a>
<style>
/*擬似クラスのa:lilnk 擬似要素の::before*/
a:link::before {
border: 1px solid blue;
color: yellow;
content:"情報表示 ";
background-color:LightSkyBlue;
}
/*擬似クラスのa:lilnk 擬似要素の::before*/
/* WebKit browsers */
a:-webkit-any-link::before {
border: 1px solid blue;
color: yellow;
}
</style>
<a href="javascript:void(0)">AAA 111</a><br>
<a href="#">BBB 222</a><br>
<a>擬似クラスと擬似要素のサンプル</a>
<style> /*擬似クラスのa:lilnk 擬似要素の::before*/ a:link::before { border: 1px solid blue; color: yellow; content:"情報表示 "; background-color:LightSkyBlue; } /*擬似クラスのa:lilnk 擬似要素の::before*/ /* WebKit browsers */ a:-webkit-any-link::before { border: 1px solid blue; color: yellow; } </style> <a href="javascript:void(0)">AAA 111</a><br> <a href="#">BBB 222</a><br> <a>擬似クラスと擬似要素のサンプル</a>