前回の記事で紹介した、擬似クラスと似てますが、
今回書く擬似要素は要素内のある場所を対象に適用させます。
| 書き方 | 説明 |
| 要素名:first-line | 要素内の1行目にスタイルを適用 |
| 要素名:first-letter | 要素内の1文字目にスタイルを適用 |
| 要素名:before | よその直前 |
| 要素名:after | 要素の直後 |
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
*{margin:0;padding:0;} #container{ width:640px; height:400px; background-color:#f0f0f0; margin:0 auto; } .box{ margin:24px; width:180px; height:120px; background-color:aquamarine; } .firstLine:first-line{ color:red; } .firstLetter:first-letter{ color:green; font-weight: bold; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLのメモ</title> <link rel="stylesheet" href="test.css"> </head> <body> <p class="firstLine">このように<br>適用されます。<br></p> <p class="firstLetter">このように<br>適用されます。<br></p> </body> </html> |
first-line,first-letterはあまり使い道がないと
思います。どう使うんだろうか？