cssの擬似要素について
経緯
フォントアイコンと文章を並べた時に、表示位置がずれるのが気になった。
これを解決するために、要素に事前に追加する機能があると知り、利用した。
概要
擬似要素には::before, ::afterの二種類がある。文字通り、要素の前・後を担当する。
h1::before {
content: '内容';
〜スタイル指定〜
}
.example::after {
content: '内容';
〜スタイル指定〜
}
contentに内容を書く。
:(コロン)の数が一つか二つかの違いは、css2, css3のバージョンによる違いである。将来的には::二つが主流になるようだが、未対応ブラウザもあるので、現状は:が対応ブラウザが多いようだ。
position
この擬似要素を任意の位置に表示させるために設定するのがpositionだ。
名前 {position : 値}
値には以下の四つが入る。
- static：初期値。指定することはほとんどない
- relative：現在の位置を基準に相対的な位置を決める
- absolute：親要素を基準に絶対的な位置を決める
- fixed：画面のきまった位置に固定する
最終的に、このpositionを細かく調整して、無理やり意図した位置に持っていった。
もっと簡潔にする方法があるとは思うのだが、分からず。
参考：