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

2021年9月9日

書式
疑似クラス::疑似要素
擬似クラス a:link
擬似要素 ::before
使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>

 

CSS

Posted by arkgame