かんろぐ Written by kan

【コピペOK】擬似要素とは?文字の上に線を引く方法【暗記する必要ナシです】

CODE HTML/CSS

人気記事【無料サポート付】サーバー開設からWordPressの始め方をサポート

こんにちは、かんです(»@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としています。

まとめ

簡単でしたね。この擬似要素はわりと使う場面はあるかと思いますので、どこかに保存しておくことをおすすめします。

ちょっとしたテクニックを紹介しました(`・ω・´)

この記事がイイなと思ったらシェアお願いします\(^^)/

合わせて読みたい記事

人気記事【無料サポート付】サーバー開設からWordPressの始め方をサポート