概要
HTMLで同じタグやクラスの先頭や末尾に共通の文字列を表示させる方法。
たとえばh1要素の先頭に必ず”●”をつけたいときなど。
CSSの書式
[セレクター]:before {content: [文字列];}
[セレクター]:after {content: [文字列];}
動作確認
以下はh1要素の前後に共通の文字列を付加するように指定したCSSを、HTMLのヘッダー部分に書いた例。
これのページを表示させると、h1要素は全てセンタリングされ、先頭に"<<"、末尾に">>"の文字列が付加され、すべてのタグに繰り返し文字を打つ必要がない。
スタイルで記述する場合、<などのエンティティ－で書く必要はない。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Template by content</title> <style type="text/css"> h1:before {content: "<<";} h1:after {content: ">>";} h1 {text-align: center;} </style> </head> <body> <h1>テスト</h1> </body> </html> |