擬似要素のアレコレ
擬似要素とは
擬似要素とは、要素内の特定の文字や行に対してスタイルを指定したり、HTMLには存在しない形で要素のようなものをcssから追加する仕組みです。
floatプロパティを使った際の回り込み解除のために「clearfix:after」をセレクタに使うことがあるかと思いますが、これも擬似要素の一つです。
ここではよく使うであろう「::before」「::after」と「::first-letter」あたりを紹介しておきます。
「::before」と「:before」
色々なサイトでいろいろな書き方がされていると思いますが、
コロン一つはcss2のルール
コロン二つはcss3のルール
になっています。
css3が常用されている現状はどちらでも表示できますし、実際に使えるブラウザはコロン一つのほうが多いとされています。 ですが、コロン一つは古い使い方ですし、今後コロン二つに変わっていくのでコロン二つも覚えておきましょう。 因みになぜ二つになったかというと、擬似クラスと区別するためらしいです
::beforeと::after
擬似要素の中で利用頻度が多いのはこの「::before」と「::after」でしょう
この擬似要素を使うと要素の前後に新しく要素的のものを作ることができます。
新しく要素的なものを作るためには「content」プロパティをセット使う必要があります。
このcontentプロパティは「::before」と「::after」のためにあるプロパティなので他では使わないようにしましょう
もちろん追加した要素的なものにもスタイルの指定はできますのでそのまま見た目を変えることもできます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>劇的リ〇ォーム</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>ビフォーアフター</h1> </body> </html> |
このHTML内の「h1要素」に対して擬似要素を使ってみる場合cssファイルに次のように書きます
|
1 2 3 4 |
h1::before{ content:"大改造！！劇的"; color:red; } |
するとこのように表示されます
今回であればh1要素の先頭に「大改造！！劇的」が追加されます。
after擬似要素を使えばh1要素の最後に追加したcontentプロパティの中身が表示されます。
これはとても便利ですね
※ SEO的にもこの方法で追加したものは無視されるとされていますので安心安全
::first-letter
擬似要素の一つである「::first-letter」は、ブロックレベル要素の最初の行の最初の文字にスタイルを指定するときに使える擬似要素です。
ルールとして最初の文字より前に画像やtableなどの要素がないときに限定されます。
大体のプロパティが使えますので使いやすいのではないかと思います
