ブログBLOG

CSS擬似要素を理解しよう！::beforeや::afterの使い方【サンプルあり】

更新日：2022/03/22

「擬似要素」という言葉から何を思い浮かべますか？
コーディングをしたことがある方が最初に思い浮かぶのは、やはり::beforeや::afterではないかと思います。
実際に案件で使用する擬似要素は、::beforeや::afterがほとんどです。
ですが擬似要素について調べてみたところ、様々な種類の擬似要素に出会いました。
ということで今回は、擬似要素の基本的な使い方と実務で使えそうな擬似要素の紹介、そして擬似要素でできることを紹介します。
ぜひ、最後までご覧ください！

1 擬似要素とは
2 擬似要素の使い方
3 擬似要素の種類
4 擬似要素でできること
5 まとめ

擬似要素とは

指定した要素の特定の部分にスタイルを付けられるものです。
CSSで擬似的に要素が作成されるので、HTMLを操作せずに要素を追加できます。
擬似要素と似ている擬似クラスというものもあるのですが、指定方法が若干違うようです。

擬似要素	二重コロン (::)
擬似クラス	単一コロン (:)

擬似クラスについて気になった方はこちらの記事をご覧ください。

【CSS】擬似クラスを使いこなそう！:not()や:nth-child()の使い方

擬似要素の使い方

基本的にセレクタ(ID,タグ名,クラス名など)::擬似要素名と記述します。


.class-name::after{
  // スタイル記述
 }

.class-name::after{

// スタイル記述

}

また、SCSSではこのように記述できます。


.class-name{
　 &::after{
     // スタイル記述
   }
 }

.class-name{

　 &::after{

// スタイル記述

}

::beforeまたは::afterを指定する場合、必ずcontentを指定する必要があります。
テキストや記号を擬似要素として挿入したい場合は、content内に記述してください。
テキストや記号以外の要素や画像を挿入したい場合は、contentを空(content: "";)にします。
そして、擬似要素にposition: absolute;を、擬似要素を付けた要素にposition: relative;を指定する必要があります。


// HTML
<div class="content-after"></div>

// CSS
<style>
.content-after {
  position: relative;
}
.content-after::after {
  position: absolute;
  content: "";
}
</style>

// HTML

// CSS

<style>

.content-after {

position: relative;

}

.content-after::after {

position: absolute;

content: "";

}

</style>

擬似要素の種類

擬似要素といえば、::before や ::after を思い浮かべると思います。
ですが、実は擬似要素にはさまざまな種類があります。

::after	選択した要素の最後の子要素
::backdrop	全画面モードでの余白カラー
::before	選択した要素の最初の子要素
::first-letter	ブロックレベル要素の最初の行の最初の文字にスタイルを適用
::first-line	ブロックレベル要素の最初の行にスタイルを適用
::marker	リスト項目の箇条書き記号ボックス (ふつうは黒丸や番号) を選択
::part()	一致する part 属性を持つシャドウツリー内の要素
::placeholder	input または textarea 要素のプレイスホルダー文字列
::selection	ユーザーが (テキストをマウスでクリックやドラッグすることで) 選択した文書の一部にスタイルを適用
::slotted()	HTML テンプレート内にあるスロットに配置された任意の要素

参考 : 擬似要素 (Pseudo-elements) – CSS: カスケーディングスタイルシート | MDN

このようにたくさん種類があります。
この中から実務で使えそうなものをピックアップしてみました。

::after（::before）

選択した要素の最後の子要素（::beforeの場合、最初の子要素）として擬似要素が作成されます。


// HTML
<div class="content-after"></div>

// CSS
<style>
.content-after {
  position: relative;
  width: 50px;
  height: 100px;
  background-color: #ff6767;
}
.content-after::after {
  position: absolute;
  content: "";
  width: 30px;
  height: 30px;
  background-color: #000;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  border-radius: 50%;
}
</style>

// HTML

// CSS

<style>

.content-after {

position: relative;

width: 50px;

height: 100px;

background-color: #ff6767;

}

.content-after::after {

position: absolute;

content: "";

width: 30px;

height: 30px;

background-color: #000;

top: 0;

bottom: 0;

right: 0;

left: 0;

margin: auto;

border-radius: 50%;

}

</style>

真ん中の黒い丸が擬似要素です。

擬似要素の記述が成功すると、検証ツールではこのように出力されます。


<div class="content-after">
　::after // 追加された擬似要素
</div>

　::after // 追加された擬似要素

</div>

擬似要素を指定したのに表示されないときは、検証ツールで出力されているか確認してみてください。
もしされていなければ、CSSの記述方法に問題があるかもしれません。
まずは以下が指定されているか確認してみると良いと思います。

::after, ::before 指定の注意点

::backdrop

全画面表示の時の余白部分のカラーを調整できます。
たとえばvideoタグで設置したMP4のデフォルト状態を見てみましょう。

画面幅に合わない余白部分は黒く表示されるのがデフォルトです。
ですが、::backdropでカラーを指定すると背景色を変更できます。


// HTML
<video src="/img/sample-5s.mp4" controls width="100%"></video>

// CSS
<style>
video::backdrop {
  background-color: rgb(185, 204, 180);
}
</style>

// HTML

// CSS

<style>

video::backdrop {

background-color: rgb(185, 204, 180);

}

</style>

このように指定すると…

背景色を変更できました！

::first-letter

指定した要素の1文字目のテキストのスタイルを変更できます。
使う機会はそう多くはないと思いますが、知っておきたい擬似要素の1つですね。
フォント指定系のCSSはひととおり使えると思います。

最初のテキストだけスタイルを適用できます。


// HTML
<p class="first-txt">
  最初のテキストだけスタイルを適用できます。
</p>

// CSS
<style>
.first-txt::first-letter {
  font-size: 24px;
  font-weight: bold;
  color: #4f87ff;
  font-style: italic;
}
</style>

// HTML

最初のテキストだけスタイルを適用できます。

</p>

// CSS

<style>

.first-txt::first-letter {

font-size: 24px;

font-weight: bold;

color: #4f87ff;

font-style: italic;

}

</style>

::first-line

指定した要素の1行目のテキストのスタイルを変更することができます。
::first-letterと似ていますが、こちらは最初の1行目にだけスタイルが適用されます。

最初の行だけスタイルを適用されます。
2行目以降は適用されません。
2行目以降は適用されません。


// HTML
<p class="first-line">
  最初の行だけスタイルを適用されます。<br>2行目以降は適用されません。<br>2行目以降は適用されません。
</p>

// CSS
<style>
.first-line::first-line {
  font-size: 24px;
  font-weight: bold;
  color: #ff4fb6;
}
</style>

// HTML

最初の行だけスタイルを適用されます。<br>2行目以降は適用されません。<br>2行目以降は適用されません。

</p>

// CSS

<style>

.first-line::first-line {

font-size: 24px;

font-weight: bold;

color: #ff4fb6;

}

</style>

::marker

list-styleを指定したときに表示される要素のスタイルを変更します。

リスト
リスト
リスト
リスト


// HTML
<ul class="list-item">
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>

// CSS
<style>
.list-item {
  margin-left: 1em;
}
.list-item li {
  list-style: initial;
}
.list-item li::marker {
  color: #cf0505;
  font-size: 1em;
}
</style>

// HTML

</ul>

// CSS

<style>

.list-item {

margin-left: 1em;

}

.list-item li {

list-style: initial;

}

.list-item li::marker {

color: #cf0505;

font-size: 1em;

}

</style>

::placeholder

inputまたはtextareaのプレイスホルダーのスタイルを変更できます。


// HTML
<input type="text" class="content-placeholder" placeholder="スタイルを変更できます">

// CSS
<style>
.content-placeholder::placeholder {
  color: #48e4ff;
  font-weight: bold;
  font-size: 14px;
}
</style>

// HTML

// CSS

<style>

.content-placeholder::placeholder {

color: #48e4ff;

font-weight: bold;

font-size: 14px;

}

</style>

::selection

ユーザーが (テキストをマウスでクリックやドラッグすることで) 選択した文書の一部にスタイルを適用できます。
デフォルトだと背景が青、文字色が白です。
サイトの雰囲気に合わせて細かいところまでこだわりたい！という方は、ぜひ指定してみると良いと思います。

選択すると背景とテキストが紫になります


// HTML
<div class="content-selection">
  選択すると背景とテキストが紫になります
</div>

// CSS
<style>
.content-selection::selection {
  background-color: #d79aff;
  color: #7c00cf;
}
</style>

// HTML

選択すると背景とテキストが紫になります

</div>

// CSS

<style>

.content-selection::selection {

background-color: #d79aff;

color: #7c00cf;

}

</style>

擬似要素でできること

様々な種類の擬似要素を紹介しました。
実務で一番使うのは、やはり::beforeや::afterです。
そのため、::beforeまたは::afterを実際にどのように使っているのか紹介します。

アイコンを設置する

擬似要素でのアイコンの設置方法を紹介します。
以下のボタンでの擬似要素はメールのアイコンです。


// HTML
<a href="YOUR_URL" class="contact-btn">お問い合わせはこちら</a>

// CSS
<style>
.contact-btn {
  background-color: #1000e9;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 20px 10px 40px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}
.contact-btn::after {
  position: absolute;
  content: "";
  background-image: url(../img/ico_mail.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 20px;
  height: 18px;
  left: 12px;
  top: 0;
  bottom: 0;
  margin: auto;
}
</style>

// HTML

<a href="YOUR_URL" class="contact-btn">お問い合わせはこちら</a>

// CSS

<style>

.contact-btn {

background-color: #1000e9;

color: #fff;

font-weight: bold;

font-size: 14px;

padding: 10px 20px 10px 40px;

border-radius: 50%;

display: inline-block;

position: relative;

}

.contact-btn::after {

position: absolute;

content: "";

background-image: url(../img/ico_mail.svg);

background-size: 100%;

background-repeat: no-repeat;

width: 20px;

height: 18px;

left: 12px;

top: 0;

bottom: 0;

margin: auto;

}

</style>

ポイントはbackground-sizeを100%にしていることです。
指定することにより、widthやheightで指定した通りにサイズを変更できるようになります。

こちらの方法はとてもよく使うので、ぜひ挑戦してみてください。

要素の前後に文字を追加する

擬似要素のcontentにテキストを入れると、指定した位置にテキストが挿入されます。

テキストの前後に記号を置けます


// HTML
<p class="txt-mark">テキストの前後に記号を置けます</p>

// CSS
<style>
.txt-mark {
  display: inline-block;
}
.txt-mark::before {
  content: "☆";
  color: red;
}
.txt-mark::after {
  content: "★";
  color: blue;
}
</style>

// HTML

<p class="txt-mark">テキストの前後に記号を置けます</p>

// CSS

<style>

.txt-mark {

display: inline-block;

}

.txt-mark::before {

content: "☆";

color: red;

}

.txt-mark::after {

content: "★";

color: blue;

}

</style>

また、他プロパティと併用するとさらに実用的になります。

要素の数をカウントする

counter-incrementというプロパティを併用すると、動的に要素の数をカウントしてくれます。

カウントします
カウントします
カウントします
カウントします
カウントします
カウントします


// HTML
<ul class="element-count">
  <li>カウントします</li>
  <li>カウントします</li>
  <li>カウントします</li>
  <li>カウントします</li>
  <li>カウントします</li>
  <li>カウントします</li>
</ul>

// CSS
<style>
.element-count li {
  counter-increment: count;
  position: relative;
  padding-left: 3.3em;
}
.element-count li::before {
  position: absolute;
  content: counter(count) "個目";
  left: 0;
  top: 0;
  color: #ff7b00;
}
</style>

// HTML

<li>カウントします</li>

</ul>

// CSS

<style>

.element-count li {

counter-increment: count;

position: relative;

padding-left: 3.3em;

}

.element-count li::before {

position: absolute;

content: counter(count) "個目";

left: 0;

top: 0;

color: #ff7b00;

}

</style>

CSS側で自動的にカウントされるので、動的なコンテンツでも問題なく使えます。

背景を設置する

要素の背景は指定されたカラーをCSSに記述するか、背景画像を設置することが多いです。
しかし、片側だけ画面幅いっぱいの背景や斜めになっている背景のデザインを頂くこともあります。
そんな時に使用したいのが、やはり擬似要素です。

片側だけ画面幅いっぱいの背景
斜めになっている背景

片側だけ画面幅いっぱいの背景

片側だけ画面幅いっぱいの背景という言葉だけではイメージがつきにくいですよね。

このように片側だけインナー幅を飛び出ている背景です。
少々複雑なので順を追って説明していきます。

まずはHTMLと擬似要素を指定する準備のCSSを記述します。


// HTML
<div class="background">
  <div class="inner-block">
    <p class="txt">
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    </p>
  </div>
</div>

// CSS
<style>
.background {
  position: relative;
  z-index: 1;
}
.inner-block {
  position: relative;
  width: 1040px;
  padding: 0 30px;
  margin: 0 auto;
}
</style>

// HTML

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</p>

</div>

// CSS

<style>

.background {

position: relative;

z-index: 1;

}

.inner-block {

position: relative;

width: 1040px;

padding: 0 30px;

margin: 0 auto;

}

</style>

現時点ではこのような感じです。

次に、テキストに背景を指定しましょう。
余白等はデザインに合わせてください。


.background .txt {
  padding: 15px 0 15px 40px;
  background-color: #ff9d9d;
}

.background .txt {

padding: 15px 0 15px 40px;

background-color: #ff9d9d;

}

上記をCSSに追記すると、

このようになります。

最後に擬似要素でインナー幅をはみ出ている部分を作成しましょう。


.background::after {
  position: absolute;
  content: "";
  width: 50%;
  height: 100%;
  background-color: #ff9d9d;
  right: 0;
  top: 0;
  z-index: -1;
}

.background::after {

position: absolute;

content: "";

width: 50%;

height: 100%;

background-color: #ff9d9d;

right: 0;

top: 0;

z-index: -1;

}

ポイントが下記2点です。

インナーブロックより外の要素に擬似要素をつける
画面幅いっぱいを実現するため
height: 100%;
中のテキストに合わせて背景を伸縮させるため
擬似要素にz-index: -1;をつける
背景をテキストの下にするため
また、擬似要素を付けた要素に-1より大きい値のz-indexを指定してください

コードをCSSに追記したら完成です！
擬似要素の背景色をわかりやすく青色に変えてみました。
インナー幅を飛び出ている部分が擬似要素ということがわかりますね。

すべて記述されているコードはこちらです。


// HTML
<div class="background">
  <div class="inner-block">
    <p class="txt">
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    </p>
  </div>
</div>

// CSS
<style>
.background {
  position: relative;
  z-index: 1;
}
.background::after {
  position: absolute;
  content: "";
  width: 50%;
  height: 100%;
  background-color: #ff9d9d;
  right: 0;
  top: 0;
  z-index: -1;
}
.background .txt {
  padding: 15px 0 15px 40px;
  background-color: #ff9d9d;
}
.inner-block {
  position: relative;
  width: 1040px;
  padding: 0 30px;
  margin: 0 auto;
}
</style>

// HTML

</p>

</div>

// CSS

<style>

.background {

position: relative;

z-index: 1;

}

.background::after {

position: absolute;

content: "";

width: 50%;

height: 100%;

background-color: #ff9d9d;

right: 0;

top: 0;

z-index: -1;

}

.background .txt {

padding: 15px 0 15px 40px;

background-color: #ff9d9d;

}

.inner-block {

position: relative;

width: 1040px;

padding: 0 30px;

margin: 0 auto;

}

</style>

斜めになっている背景

このように斜めになっている背景の作成方法を紹介します。

意外によく使うので、ぜひ覚えておくと良いと思います。
こちらもやや工程が多いので、順を追って説明します。

まずはHTMLとベースとなるグレーの背景を指定していきます。


// HTML
<div class="mv">
  <div class="inner-block">
    <p class="txt">
      タイトルタイトル<br>タイトルタイトル
    </p>
  </div>
</div>

// CSS
<style>
.inner-block {
  position: relative;
  width: 1040px;
  padding: 0 30px;
  margin: 0 auto;
  height: 100%;
}
.mv {
  height: 800px;
  background-color: #d4d4d4;
  position: relative;
  z-index: 1;
}
.mv .txt {
  font-size: 45px;
  font-weight: bold;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>

// HTML

タイトルタイトル<br>タイトルタイトル

</p>

</div>

// CSS

<style>

.inner-block {

position: relative;

width: 1040px;

padding: 0 30px;

margin: 0 auto;

height: 100%;

}

.mv {

height: 800px;

background-color: #d4d4d4;

position: relative;

z-index: 1;

}

.mv .txt {

font-size: 45px;

font-weight: bold;

height: 100%;

display: flex;

align-items: center;

}

</style>

このようになります。

次に、斜めの部分以外の背景を作成します。


.mv::before {
  position: absolute;
  content: "";
  width: calc(50% - 150px);
  height: 100%;
  left: 0;
  top: 0;
  background-color: #79ccdb;
  z-index: -1;
}

.mv::before {

position: absolute;

content: "";

width: calc(50% - 150px);

height: 100%;

left: 0;

top: 0;

background-color: #79ccdb;

z-index: -1;

}

このようになります。
widthは斜めの部分の太さや角度に合わせて適宜調整してください。

最後に斜めの部分を作成します。


.mv::after {
  position: absolute;
  content: "";
  width: 300px;
  height: 100%;
  background-color: #79ccdb;
  left: calc(50% - 300px);
  top: 0;
  bottom: 0;
  margin: auto;
  transform: skewX(-20deg);
  z-index: -1;
}

.mv::after {

position: absolute;

content: "";

width: 300px;

height: 100%;

background-color: #79ccdb;

left: calc(50% - 300px);

top: 0;

bottom: 0;

margin: auto;

transform: skewX(-20deg);

z-index: -1;

}

こちらをCSSに追記して完成です！
斜めの要素を作成するにはさまざまな方法があると思いますが、今回はtransform: skewX()を使用しました。
要素を指定した方向にゆがませるプロパティです。
気になった方がこちらをご覧ください。

skewX() – CSS: カスケーディングスタイルシート | MDN

すべて記述されているコードはこちらです。


// HTML
<div class="mv">
  <div class="inner-block">
    <p class="txt">
      タイトルタイトル<br>タイトルタイトル
    </p>
  </div>
</div>
 
// CSS
<style>
.inner-block {
  position: relative;
  width: 1040px;
  padding: 0 30px;
  margin: 0 auto;
  height: 100%;
}
.mv {
  height: 800px;
  background-color: #d4d4d4;
  position: relative;
  z-index: 1;
}
.mv .txt {
  font-size: 45px;
  font-weight: bold;
  height: 100%;
  display: flex;
  align-items: center;
}
.mv::before {
  position: absolute;
  content: "";
  width: calc(50% - 150px);
  height: 100%;
  left: 0;
  top: 0;
  background-color: #79ccdb;
  z-index: -1;
}
.mv::after {
  position: absolute;
  content: "";
  width: 300px;
  height: 100%;
  background-color: #79ccdb;
  left: calc(50% - 300px);
  top: 0;
  bottom: 0;
  margin: auto;
  transform: skewX(-20deg);
  z-index: -1;
}
</style>

// HTML

タイトルタイトル<br>タイトルタイトル

</p>

</div>

// CSS

<style>

.inner-block {

position: relative;

width: 1040px;

padding: 0 30px;

margin: 0 auto;

height: 100%;

}

.mv {

height: 800px;

background-color: #d4d4d4;

position: relative;

z-index: 1;

}

.mv .txt {

font-size: 45px;

font-weight: bold;

height: 100%;

display: flex;

align-items: center;

}

.mv::before {

position: absolute;

content: "";

width: calc(50% - 150px);

height: 100%;

left: 0;

top: 0;

background-color: #79ccdb;

z-index: -1;

}

.mv::after {

position: absolute;

content: "";

width: 300px;

height: 100%;

background-color: #79ccdb;

left: calc(50% - 300px);

top: 0;

bottom: 0;

margin: auto;

transform: skewX(-20deg);

z-index: -1;

}

</style>

まとめ

今回は擬似要素について紹介しました。
使用方法などに決まりがあるので戸惑うかもしれません。
ですが、特に::beforeや::afterはコーディングをする上では絶対に必要な知識だと思います。
ボタンのアイコンを擬似要素で指定してみるなど、少しずつ慣れていただければと思います。
以上、最後までご覧いただきありがとうございました！

コーディング