【CSS】擬似要素を作成するbefore/afterの使い方を解説

擬似要素は、高度なスタイリングを行うときに効果的な手法です。例えばテキストとテキストを重ねたり、背景を斜めにカットしたりなど、リッチなWebデザインの実装を効率よく行えます。

擬似要素には多くの種類がありますが、その中でもよく使用される擬似要素はbeforeとafterです。

この記事では、疑似要素beforeとafterの使い方を解説します。擬似要素を使いこなして、おしゃれなWebサイトを作成できるようになりましょう。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

before/afterとは

beforeとafterは、要素の前後に擬似要素を作成する指定方法です。

擬似要素とは、簡単に言えば「仮の要素」のことです。HTMLに記述せず、CSSで擬似的に作成される要素であるため、「擬似要素」と呼ばれています。

擬似要素はHTMLコードを変更せずに挿入することができるため、SEO的な影響を気にせずに文字などの要素を挿入することができます。

擬似要素とはどのようなものかを理解したら、次は使い方を学びましょう。次の項目では、before/afterの使い方を詳しく解説します。

before/afterの使い方

疑似要素before/afterを使用するときの基本書式は、以下のとおりです。

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は要素の直後に表示されます。

出力結果を確認してみましょう。

 <p>テキスト</p>

p::before {
  content: "要素の直前に表示されます";
  color: red;
}

p::after {
  content: "要素の直後に表示されます";
  color: blue;
}

before/afterの実装例

before/afterをよく使うのは以下のような実装場面です。

テキストを追加する

beforeとafterでテキストを追加するには、content: "";の中にテキストを記述します。

<p>テキスト</p>

p::before {
  content: "テキストを追加します";
  color: red;
}

p::after {
  content: "テキストを追加します";
  color: blue;
}

画像を表示する

beforeとafterで画像を表示するには、2つの方法があります。

• contentに画像のパスを指定する
• 背景画像を指定する

以下のHTMLで解説します。

<div class="image"></div>

contentに画像のパスを指定する方法

contentに画像のパスを指定すれば、画像を表示できます。

.image {
  height: 300px;
  width: 300px;
}

.image::before {
  content: url(..//img/気球.jpg);
}

こちらの方法では、元の画像にheightとwidthを指定する必要があります。また、擬似要素自体にはheightとwidthは適用されないので気をつけましょう。

背景画像として表示する方法

.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を併用することで、要素を重ねて表示することも可能です。

例えば、タイトルに英語を重ねるデザインを作成してみましょう。

<h1>タイトル</h1>

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を使用すれば、背景をおしゃれにデザインできます。

例えば、背景色を斜めカットする実装をみてみましょう。

<div class="bg"></div>

.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を使うと、テキストを吹き出しで表示することも可能です。

<div class="content"></div>

.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以外にも数多く存在します。

以下が擬似要素の一覧表です。

参考：CSSカスケーティングスタイルシート

beforeとafter以外の擬似要素を実務で使う場面は多くありませんが、HTMLとCSSだけでは困難な実装を行うときに便利です。参考までに覚えておきましょう。

まとめ

before/afterセレクタは擬似要素を作成したいときに使用します。擬似要素を使用すれば高度なスタイリングを行えるので、beforeとafterを使いこなせるようになっておきましょう。

before/afterまとめ

• 擬似要素を作成するための指定方法
• beforeは要素の直前、afterは要素の直後に表示される
• CSSでテキストを追加する、要素を重ねるなどの高度なスタイリングが可能

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー