「CSS」疑似クラスと疑似要素を設定するサンプル

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

書式
疑似クラス::疑似要素
擬似クラス 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>