【コピペOK】擬似要素とは？文字の上に線を引く方法【暗記する必要ナシです】
PR ※当サイトではアフィリエイト広告を利用しています
こんにちは、かんです(»@minimal_kan)
WordPressをメインにWEB制作をしています。»プロフィールはこちら
擬似要素が知りたい人
「擬似要素ってなんだろう。具体的なイメージがあまり思い浮かばないなぁ。ちょっと難しそうだからコピペで使えるコードがあるといいなぁ」
こういったお悩みを解決します。
擬似要素とは、文章の前後に特別なCSSを設定することにより、特定の要素を加えて装飾できるといった効果があります。
例えば、下の画像を見てください。
画像のように、Airbnbのページなどで使われたりする見出しの前後にあるような下線ですね。今回は文字の上に線が引かれていますが、これが擬似要素と言われCSSで装飾されています。
これが使えると、見出しに様々なデザインを加えることができるので、サクッと使えるようにしちゃいましょう！
ブラウザはChrome、エディタはVSCodeを使用しています。それではいってみましょう！
【コピペOK】擬似要素とは？文字の上に線を引く方法【暗記する必要ナシです】
簡単なのでコピペでもいけます。
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としています。
まとめ
簡単でしたね。この擬似要素はわりと使う場面はあるかと思いますので、どこかに保存しておくことをおすすめします。
ちょっとしたテクニックを紹介しました(｀・ω・´)
合わせて読みたい記事
