CSS content: ::berfore, ::after 擬似要素
概略
content のテキストは選択できません
テキストのコピーができません。 本文に関係するテキストは ::after, ::before の content にしない方が良いです。
前後にテキストを追加する
ul,li のリストで自前の箇条書きマークを ::before で付ける。
HTML: ul,ol,li タグ
- TestCSS_content_before01.html
「関連:」、「注意:」など定型の文字列を先頭に付けるサンプル。 - TestCSS_content_after01.html
繰り返し使うサンプルテキストを 1つの CSS 指定で済ませるサンプル。 - TestCSS_content_display_attribute01.html
content と attr() で要素の属性値を表示する。
HTML5 ユーザー定義の要素を使う - TestCSS_attr_svg01.html
XML の属性値を表示する。
JavaScript: XML の処理
コンテントを inline-block にする
::after や ::before で挿入する要素を
display: inline-block; にすると要素の大きさ (width, height)
を持たせることができます。
CSS display: inline, block, inline-block など
inline-block の擬似要素を入れるサンプル。
リンクにアイコンを付ける
リンクにアイコンをつける。 content にアイコン画像を設定する。
HTML: a タグ