::after CSS擬似要素

CSSの「::after」疑似要素を使うと、指定した要素の後にテキストや画像を挿入することができます。この記事では、疑似要素の使い方をサンプルを交えてご紹介します。

要素

指定した要素の後にテキストや画像を挿入する。

element::after {
  /* properties */
}

クラス

指定した要素タイプのうち、指定したクラスを持つ要素の後にテキストや画像を挿入する。<

element.class::after {
  /* properties */
}

指定したクラスを持つ要素の後にテキストや画像を挿入する。<

.class::after {
  /* properties */
}

ID

指定したIDの要素の後にテキストや画像を挿入する。

#id::after {
  /* properties */
}

疑似クラスとの併用

CSSの疑似クラスと疑似要素を併用する場合、疑似クラスを先に指定する。

疑似クラス(:last-child)と疑似要素(::after)を併用する例を次に示す。

li:last-child::after {
  /* properties */
}

::after擬似要素を用いて、blockquote要素の後に「』」という文字列を挿入する例を示す。

blockquote::after {
  content: "』";
}
<blockquote>
吾輩は猫である。
名前はまだ無い。
どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
</blockquote>
吾輩は猫である。 名前はまだ無い。 どこで生れたかとんと見当がつかぬ。 何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

要素の後にアイコン画像を挿入する

::after CSS擬似要素を用いて、マッチする要素の後にアイコン画像を挿入することができる。

CSSではマッチする要素の条件を指定する。

a.external::after {
  content: url(/css/img/external-site.png);
  margin-left: .5em;
}

挿入する画像のURLを content プロパティに指定する。

<a href="https://tsuker.net" class="external">資産運用のすゝめ</a>

上記のHTMLはウェブブラウザで次のように表示される。

資産運用のすゝめ

改行

CSSのcontentプロパティの値にHTMLコードを含めることはできないため、<br> タグを使って改行することはできない。

改行のエスケープ文字である \A と、white-space プロパティで自動改行しないようにすることによって、要素の末尾で改行することができる。

.br-after::after {
  content: "\A";
  white-space: pre;
}
<span class="br-after">ここで</span>改行

ここで改行

三角

CSSの ::after 疑似要素を使って、三角を描写することができる。

.arrow {
  display: inline-block;
  position: relative;
  padding-right: 12px;
  text-decoration: none;
}
.arrow::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent blue;
  top: 50%;
  margin-top: -6px;
  margin-left: .5em;
}
<a href="/" class="arrow">SE学院</a>

SE学院

レスポンシブな三角

CSSの ::after 疑似要素を使って、レスポンシブ・デザインの三角形を描写することができる。

.triangle {
  position: relative;
  background: silver;
  margin: 0 0 60px;
}
.triangle::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 60px 50vw 0 50vw;
  border-color: silver transparent transparent transparent;
  top: 100%;
  right: 0;
  left: 0;
}
<div class="triangle">
  <p>テキスト</p>
</div> 

テキスト

CSS疑似要素