ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。
比較的利用している「擬似要素」の覚書。
「擬似要素と擬似クラスの違いの覚書」と多少内容重複するかと思います。
擬似要素(Pseudo-elements)の概要
擬似要素は要素内の一部（特定のパーツ）に対してスタイルを適用する。
擬似要素は擬似的に要素を生成していると個人的には理解してます。
「擬似要素と擬似クラスの違いの覚書」参照。
CSS3までで勧告されている擬似要素は以下の4つ。
- ::first-letter擬似要素
- ::first-line擬似要素
- ::before擬似要素
- ::after擬似要素
::first-letter擬似要素の概要
文字通り指定した要素の一文字目のテキストに適用する擬似要素。
正確に言うとブロックレベル要素の一文字目という点に注意。
「first」=最初。「letter」= 文字。レターでニワカは手紙を想像しましたがここでは文字の意。
約物（’とか:とか!などの記号類。細かくはググると良い。ニワカな私に期待してはいけない。）が行頭文字もしくは行頭文字の直後に現れる場合は、そちらにもスタイルが適用される仕様なので注意。
要素名::first-letter {
プロパティ: 値;
}
::first-letter擬似要素の使用例
::first-letter擬似要素の使用例をhtmlとcssと共に紹介。
約物のテストも兼ねて。
html
<p>Lorem ipsum</p>
<p>"L!orem ipsum</p>
<p>「ダミーテキスト」</p>
css
p::first-letter {
color: red;
font-size: 18px;
}
実際の表示
個人的には、ほぼ使用したことがないが約物も含むことに注意したい。”や「は文頭で入れることも多いかと思うので。
codepenの使用例ではdisplayをinlineにした例も足したが、確かにブロックレベル要素ではないため適用されなかった。
::first-line擬似要素の概要
こちらも文字通り指定した要素の一行目のテキストに適用する擬似要素。
こちらもブロックレベル要素の一行目という点に注意。
要素名::first-line {
プロパティ: 値;
}
::first-line擬似要素の使用例
::first-line擬似要素の使用例をhtmlとcssと共に紹介。
html
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras faucibus ante sit amet quam gravida, eu scelerisque lectus gravida. Aenean sapien sem, posuere sed tincidunt eu, sodales vel nibh. Nam accumsan imperdiet odio, a feugiat quam.</p>
css
p::first-line {
color: red;
font-size: 18px;
}
実際の表示
個人的には、一度も使用したことがありません。レスポンシブで作成することがこの時代に改行される部分が可変の状況で一行目だけにスタイルを適用したいという時は想像できないので今後も使うことはないかも。。
::before擬似要素の概要
::before擬似要素は要素の前に指定した内容を追加することができる擬似要素。
追加する内容はcontentプロパティに設定した値が入る。
要素名::before {
プロパティ: 値;
}
::before擬似要素の使用例
::before擬似要素の使用例をhtmlとcssと共に紹介。
html
<h3>タイトル</h3>
<ul>
<li><a href="#">メニュー01</a></li>
<li><a href="#">メニュー02</a></li>
<li><a href="#">メニュー03</a></li>
</ul>
css
h3::before{
content: "★";
}
ul {
list-style:none;
margin: 0;
padding: 0;
}
li a {
position: relative;
display:block;
padding: 10px 5px 10px 25px;
}
li a::before {
position: absolute;
content: "■";
left: 5px;
top: 5px;
line-height: 1;
font-size: 28px;
}
li a:hover {
background-color: aqua;
}
実際の表示
単純な例としてタイトルの前に星マークを追加した例。
と、実際にそういう使い方をする機会はあまりないので、実際に使用する機会のあるメニューのリンクの前に入れる例をあげました。
contentの内容を画像やフォントアイコンに変更すればアイコンマークなどを差し込める。
メニューより記事の一覧などのリンクに使うことが多い気がします。
ちなみに、今回のメニューの例は絶対配置なので::beforeを::afterに変更しても表示は変わりません。
::after擬似要素の概要
::after擬似要素は要素の後ろに指定した内容を追加することができる擬似要素。
追加する内容はcontentプロパティに設定した値が入る。
要素名::after {
プロパティ: 値;
}
::after擬似要素の使用例
::after擬似要素の使用例をhtmlとcssと共に紹介。
html
<h3>タイトル</h3>
<ul>
<li><a href="#">メニュー01</a></li>
<li><a href="#">メニュー02</a></li>
<li><a href="#">メニュー03</a></li>
</ul>
css
h3::after {
content: "★";
}
ul {
list-style:none;
margin: 0;
padding: 0;
}
li a {
position: relative;
display:block;
padding: 10px 5px 10px 0;
text-decoration: none;
}
li a::after {
position: absolute;
content: "▶︎";
right: 5px;
top: 12px;
line-height: 1;
font-size: 21px;
color: red;
}
li a:hover {
background-color: aqua;
}
実際の表示
HTMLソースは::before擬似要素の例と一緒です。
単純な例としてタイトルの後ろに星マークを追加した例。
と、::before擬似要素と同様に右側に記号を配置した例。
contentの内容は画像やフォントアイコンを利用することの方が多いかもですね。
こちらも、今回のメニューの例は絶対配置なので::afterを::beforeに変更しても表示は変わりません。
::afterに関しては、floatとを解除する際のclearfixで使用することが一番多いかもしれませんね。
個人的メモ
::before擬似要素と::after擬似要素はコロンを一つにすればIE8も対応。コロン二つはIE9以降対応。
::first-letter擬似要素と::first-line擬似要素は、コロン一つならIE7から対応。
参照ページ
記事にする際に参考にさせていただいたページ。
