擬似要素は、高度なスタイリングを行うときに効果的な手法です。例えばテキストとテキストを重ねたり、背景を斜めにカットしたりなど、リッチなWebデザインの実装を効率よく行えます。
擬似要素には多くの種類がありますが、その中でもよく使用される擬似要素はbeforeとafterです。
この記事では、疑似要素beforeとafterの使い方を解説します。擬似要素を使いこなして、おしゃれなWebサイトを作成できるようになりましょう。
目次
before/afterとは
beforeとafterは、要素の前後に擬似要素を作成する指定方法です。
擬似要素とは、簡単に言えば「仮の要素」のことです。HTMLに記述せず、CSSで擬似的に作成される要素であるため、「擬似要素」と呼ばれています。
擬似要素はHTMLコードを変更せずに挿入することができるため、SEO的な影響を気にせずに文字などの要素を挿入することができます。
SEOとは？
Googleの検索結果で、Webサイトが掲載される順位を上げる方法のこと。
HTMLのタグを正しく扱えているかという指標が存在する。
擬似要素とはどのようなものかを理解したら、次は使い方を学びましょう。次の項目では、before/afterの使い方を詳しく解説します。
before/afterの使い方
疑似要素before/afterを使用するときの基本書式は、以下のとおりです。
1 2 3 4 5 6 | p::before { content: ""; } p::after { content: ""; } |
要素やclass名、id名などのあとに::before、::afterと記述します。
beforeとafterの前にはコロン(:)の記述が2つ必要です。
※コロンを1つだけ記述してもCSSは適用されますが、この書き方は非推奨です。コロンは2つ記述しましょう。
スタイルの中にはcontentの指定が必要です。content: "";の中身は空白でも大丈夫ですが、記号やテキストを表示したいときにはcontentのクオーテーションの中に表示したい内容を記述します。
contentのクォーテーションマークは、シングル（”）でもダブル（””）でも、どちらでも問題ありません。
before/afterの違い
beforeとafterの違いは、擬似要素が表示される位置にあります。
beforeは要素の直前、afterは要素の直後に表示されます。
出力結果を確認してみましょう。
1 | <p>テキスト</p> |
1 2 3 4 5 6 7 8 9 | p::before { content: "要素の直前に表示されます"; color: red; } p::after { content: "要素の直後に表示されます"; color: blue; } |
before/afterの実装例
before/afterをよく使うのは以下のような実装場面です。
- テキストを追加する
- 要素を重ねて表示する
- 背景色をおしゃれにする
- 画像を表示する
- 吹き出しを作る
テキストを追加する
beforeとafterでテキストを追加するには、content: "";の中にテキストを記述します。
1 | <p>テキスト</p> |
1 2 3 4 5 6 7 8 9 | p::before { content: "テキストを追加します"; color: red; } p::after { content: "テキストを追加します"; color: blue; } |
画像を表示する
beforeとafterで画像を表示するには、2つの方法があります。
- contentに画像のパスを指定する
- 背景画像を指定する
以下のHTMLで解説します。
1 | <div class="image"></div> |
contentに画像のパスを指定する方法
contentに画像のパスを指定すれば、画像を表示できます。
1 2 3 4 5 6 7 8 | .image { height: 300px; width: 300px; } .image::before { content: url(..//img/気球.jpg); } |
こちらの方法では、元の画像にheightとwidthを指定する必要があります。また、擬似要素自体にはheightとwidthは適用されないので気をつけましょう。
背景画像として表示する方法
1 2 3 4 5 6 7 | .image::before { content: ""; display: inline-block; background: url(../img/気球.jpg) 100% 100% / cover; height: 300px; width: 300px; } |
こちらの方法では、擬似要素そのものにheightとwidthを指定できます。擬似要素そのものにheightやwidthを指定したいときはdisplay: block;またはdisplay: inline-block;を指定しましょう。
要素を重ねて表示する
before/afterとpositionを併用することで、要素を重ねて表示することも可能です。
例えば、タイトルに英語を重ねるデザインを作成してみましょう。
1 | <h1>タイトル</h1> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | h1 { position: relative; font-size: 80px; margin-top: 30px; margin-left: 30px; } h1:before { content: "title"; color:rgb(249, 205, 205); position: absolute; font-size: 100px; top: -5px; z-index: -1; } |
背景色をおしゃれにする
before/afterを使用すれば、背景をおしゃれにデザインできます。
例えば、背景色を斜めカットする実装をみてみましょう。
1 | <div class="bg"></div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .bg { position: relative; z-index: 0; width: 100%; height: 50vh; background: #00a8be; } .bg::after { content: ""; position: absolute; left:0; top: 0; transform: skewX(77deg); transform-origin: top left; z-index: -1; width: 100%; height: 100%; background: #ffbb1e; } |
吹き出しを作る
before/afterを使うと、では、テキストを吹き出しで表示することも可能です。
1 | <div class="content"></div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .content { position: relative; background: #ffbb1e; width: 800px; padding: 20px; border-radius: 50px; margin-bottom: 30px; } .content::after { position: absolute; content: ""; border-top: 15px solid #ffbb1e; border-right: 15px solid transparent; border-left: 15px solid transparent; top: 100%; left: 50%; transform: translateX(-50%); } |
before/after以外の擬似要素
擬似要素の種類は、beforeやafter以外にも数多く存在します。
以下が擬似要素の一覧表です。
| 擬似要素 | 意味 |
::backdrop | 全画面モードでの余白カラー |
::first-letter | 最初の文字にスタイルを適用 |
::first-line | 最初の行にスタイルを適用 |
::marker | リストの黒丸や番号にスタイルを適用 |
::part() | 一致するpart属性を持つシャドウツリー内の要素 |
::placeholder | inputやtextareaのplaceholderにスタイルを適用 |
::selection | 選択した文書の一部にスタイルを適用 |
::stotted | HTML内のスロットにある任意の要素 |
beforeとafter以外の擬似要素を実務で使う場面は多くありませんが、HTMLとCSSだけでは困難な実装を行うときに便利です。参考までに覚えておきましょう。
まとめ
before/afterセレクタは擬似要素を作成したいときに使用します。擬似要素を使用すれば高度なスタイリングを行えるので、beforeとafterを使いこなせるようになっておきましょう。
before/afterまとめ
- 擬似要素を作成するための指定方法
- beforeは要素の直前、afterは要素の直後に表示される
- CSSでテキストを追加する、要素を重ねるなどの高度なスタイリングが可能