擬似要素before/afterの概要と具体例

HTML/CSS

before/afterの使い方

before/afterの擬似要素は、要素やクラスに対して::beforeあるいは::afterを追加して定義します。
擬似要素で表示する内容はcontentプロパティに記述します。

before/afterの具体例は以下の通りです。

<div class="example">example</div>


.example {
  background: lightgreen;
  width: 150px;
}

.example::before {
  content: "『";
}

.example::after {
  content: "』";
}

See the Pen
Untitled by Toshiharu Nishina (@nishina555)
on CodePen.

before/afterの擬似要素の特性

インライン要素になる

before/afterの擬似要素はインライン要素になるため横幅や高さの指定ができません。

<div class="item"></div>


.item {
  width: 200px;
  height: 200px;
  background-color: lightskyblue;
}

.item::after {
  content: 'item::after';
  background: lightgreen;
  width: 100px; /* インラインなので効かない */
  height: 100px; /* インラインなので効かない */
}

See the Pen
pseudo-before-after-inline by Toshiharu Nishina (@nishina555)
on CodePen.

before/afterで横幅や高さの指定をしたい、つまりブロックレベル要素のbefore/afterを作りたい場合はdisplay: blockを指定します。

contentプロパティは必須

contentプロパティが存在しないとbefore/afterの擬似要素は表示されません。
contentプロパティに記載する内容がない場合はcontent: ''を指定します。

要素の上に重なる

before/afterの擬似要素は以下のように要素の上に重なります。

<div class="item">


.item {
  width: 200px;
  height: 200px;
  background-color: lightskyblue;
  position: relative;
}

.item::after {
  content: 'item::after';
  width: 100px;
  height: 100px;
  background: lightgreen;
  position: absolute;
  left: 0;
  bottom: 0;
}

See the Pen
pseudo-before-after-z-index by Toshiharu Nishina (@nishina555)
on CodePen.

重なり順を変更する場合はz-indexプロパティを指定します。

before/afterを利用した具体例

ラベル・バッチ

relativeとabsoluteを組み合わせて実装するデザインです。具体例は以下の通りです。

<div class="item">


.item {
  width: 200px;
  height: 200px;
  background-color: lightskyblue;
  position: relative;
}

.item::after {
  content: '';
  width: 100px;
  height: 25px;
  background: lightgreen;
  position: absolute;
  top: 0;
  left: 0;
}

See the Pen
pseudo-before-after-badge by Toshiharu Nishina (@nishina555)
on CodePen.

before/afterの擬似要素はインラインですが、『position: absolute』を適用した要素の表示特性まとめで紹介したようにposition: absoluteを適用したプロパティはブロックレベル要素として扱われます。
ですので、display: blockを記述しなくても擬似要素の横幅や高さが指定できます。

なお、::afterを使わず実装すると以下のようになります。

<div class="item">
  <div class="item__badge"></div>
</div>


.item {
  width: 200px;
  height: 200px;
  background-color: lightskyblue;
  position: relative;
}

.item__badge {
  width: 100px;
  height: 25px;
  background: lightgreen;
  position: absolute;
  top: 0;
  left: 0;
}

See the Pen
pseudo-before-after-badge by Toshiharu Nishina (@nishina555)
on CodePen.

区切り文字（delimiter）

横並びの要素の間に区切り文字を追加するデザインです。具体例は以下の通りです。

<div class="container">
  <span class='item'><span>inline</span></span>
  <span class='item'><span>inline</span></span>
  <span class='item'><span>inline</span></span>
</div>


.container {
  letter-spacing: -1em; /* インラインで勝手にできる余白の削除 */
}

.item {
  letter-spacing: normal; /* インラインで勝手にできる余白の削除 */
}

.item span {
  padding: 0 10px;
  background-color: lightblue;
}

.item:not(:last-child)::after {
  content: '/'
}

See the Pen
pseudo-before-after-delimiter by Toshiharu Nishina (@nishina555)
on CodePen.

letter-spacingはインライン要素を並べたときに勝手に生まれる余白を取り除くために追加しています。
インライン要素の余白削除方法の詳細は【CSS】インラインブロック/インラインで勝手にできる余白の削除方法で解説しています。

パンくずリスト

区切り文字の応用です。具体例は以下の通りです。
なお、コードのベースはMDN Web Docsのパンくずナビゲーションを参考にしています。

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ul>
    <li class="lightgreen"><a href="" class="dotted item">Home</a></li>
    <li class="lightskyblue"><a href="" class="dotted item">Category</a></li>
    <li class="lightgreen"><a href="" class="dotted item">Sub-Category</a></li>
    <li class="lightskyblue"><span class="dotted item">Product</span></li>
  </ul>
</nav>


/*----------------------
リスト
---------------------- */
.breadcrumb ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* Flexboxにする */
}

/*----------------------
区切り文字
---------------------- */
.breadcrumb li::after {
  content: ">";
  background: red; /* 補助色 */
}

.breadcrumb li:last-child::after {
  content: "";
}

/*----------------------
パンくずリスト内の要素
---------------------- */
.item {
  padding: .5em 1em; /* 余白作成 */
}

/*----------------------
パンくずリスト内のaタグ
---------------------- */
.breadcrumb li a {
  text-decoration: none;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}


/*----------------------
要素をわかりやすくするための補助線・色
---------------------- */
.dotted {
  border-style: dotted;
}

.lightgreen {
  background: lightgreen;
}

.lightskyblue {
  background: lightskyblue;
}

See the Pen
breadcrumb-flexbox-item-padding by Toshiharu Nishina (@nishina555)
on CodePen.

パンくずリストの実装方法の詳細については擬似要素before/afterを利用したパンくずリスト実装例で紹介しています。

任意の長さ・太さのボーダー装飾

見出しの装飾などで利用するデザインです。具体例は以下の通りです。

<h1 class="example">Example</h1>


.example {
  position: relative;
  background: lightgreen;
  text-align: center; /* 文字列の中央よせ */
}

.example::after {
  content: ''; /*  要素自身がコンテンツになるため、contentの定義は不要 */
  position: absolute;

  /* 横幅130px・高さ5pxの赤い要素(ボーダー)の作成 */
  width: 130px;
  height: 5px;
  background-color: red;

  /* absolute要素の左右中央よせ */
  left: 0;
  right: 0;
  margin: auto;

  bottom: -15px;  /* 底辺同士が重なる位置よりさらに15px下に移動 */
}

See the Pen
pseudo-before-after-border by Toshiharu Nishina (@nishina555)
on CodePen.

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

参考資料

RECOMMEND