擬似要素とは？文字の上に線を引いてみる【初心者&コピペ可】
人気記事【無料サポート付】サーバー開設からWordPressの始め方をサポート
こんにちは、かんです。
現在は正社員で働きつつ、プログラミングでWEB制作。
ブログ、Twitterで発信をしています。
今回は文字の上に線を引いてみます。これは擬似要素と言われ、CSSで装飾されています。
わりと初学者の方はつまづくポイントだったりもします。
画像のように、Airbnbの模写なんかで使われたりします。
僕自身も最初はよく分からず苦労しました。
もう少し詳しくみたい方はも参考にしてみてください。
ブラウザはChrome、エディタはVSCodeを使用しています。
それではいってみましょう！
擬似要素とは？文字の上に線を引いてみる【初心者&コピペ可】
簡単なのでコピペでもいけます。
HMTLとCSSをみてみる
まずはHTMLとCSSをみていきましょう。
HTML
線を引きたい場所の次のタグにクラス名を与えていきます。
ここではh2タグの上に擬似要素が来るようにしたいので、
h2-stepというクラス名を付けています。
CSS
.h2-step::before{
content: ''; /*擬似要素に必須 何か入れる場合は content: '▶︎'; こうすることで▶︎が表示される*/
display: block; /*縦に並ばせるために指定*/
background-color: black; /*線の色*/
height: 2px; /*線の高さ、または太さ*/
width: 80px; /*線の幅*/
margin: 5px auto; /*中央寄せにしつつ上下に5pxの余白*/
}
このような感じです。
h2-step::before
どこに擬似要素をつけるかを指定するためにクラスを与えています。
今回ではh2タグの中なので、h2-stepとしています。
ここで注意なのがダブルコロンですね。
content: ”;
擬似要素に必須の記述です。
表示させたいものが決まっているのであれば、このクォーテーションの間に入れます。
擬似要素といったらコレだと覚えちゃいましょう。
display: block;
これは縦並びにさせるためです。display: blockで縦並びになります。
これがないと、そのまま文字のbefore、つまり手前（左側）に要素が配置されてしまいます。
縦並びにはブロック要素だと覚えちゃいましょう。
margin: 5px auto;
ここで大事なのが、今の時点では要素は左寄せになっているということ。
なので、一度display: blockで縦並びにしました。
そしてブロック要素の左右中央寄せをするには、margin: 0 autoです。
これはたくさん使うと思いますので覚えておきましょう。
今回はほんの少し高さを出すので5pxとしています。
まとめ
簡単でしたね。
初学者の方で悩む場面でもあります。
この擬似要素はわりと使う場面はあるかと思いますので、
どこかに保存しておくことをおすすめします。
ちょっとしたおしゃれなテクニックを紹介しました(｀・ω・´)