スタイルシートの擬似要素というのを使うと、ちょっと面白いことができる。
擬似要素の代表的なafter、beforeについてちょっとメモ代わりに書いておく。
スタイルシートの擬似要素after、beforeでできること
スタイルシートの擬似要素を使うと、前後に文章や画像、音声などいろいろなものをくっけることができる。
具体的には、
・画像を使わずにリストマークのようなものをリンクの先頭や後ろにつける。
・指定した部分に定型文（画像、音声などを含む）を入れる。
表示できるブラウザの種類
７以前のIEには対応していない。
擬似要素after
後ろに付け加える。
擬似要素before
前に付け加える。
擬似要素のafterとbeforeはブロック要素でもインライン要素でも利用できる。
擬似要素afterの利用例
スタイルシートの記載例
h3:after {content:"⇒";}
HTLの記載例
<h3>「今日の話題は擬似要素の使い方」</h3>
ブラウザの表示
「今日の話題は擬似要素の使い方」⇒
擬似要素beforeの利用例
スタイルシートの記載例）
h3:before {content:"⇒";}
HTLの記載例
<h3>「今日の話題は擬似要素の使い方」</h3>
ブラウザの表示
⇒「今日の話題は擬似要素の使い方」
ほかにもあるスタイルシートの擬似要素
擬似要素first-line
ブロックレベル要素の最初の行を対象にスタイルを適用する。
擬似要素first-letter
ブロックレベル要素の最初の文字を対象にスタイルを適用する。
first-line、first-letterはインライン要素には適用できない。
コメント