CSSの:afterで要素の後にコンテンツを挿入する方法をわかりやすく解説

2024.09.13
スポンサーリンク

::afterは疑似要素の1つで、指定した要素の後ろに内容を挿入することができます。疑似要素として使われるため、HTMLには明示的に記述する必要はなく、CSSのみで追加の装飾や内容を挿入できます。

スポンサーリンク

::afterの値とその効果の一覧

  • content: 挿入される内容を指定します。
  • display: 疑似要素の表示方法（インライン、ブロックなど）を指定します。
  • position: 疑似要素の位置を絶対配置などで制御できます。

注意点と関連情報

::afterは、要素の後ろに挿入されますが、通常のコンテンツと同様にレイアウトに影響を与える場合があります。また、contentプロパティで指定する内容がないと疑似要素は表示されません。

::afterが効かない理由として考えられること

contentプロパティが設定されていない

::after擬似要素は、必ずcontentプロパティを使って表示するコンテンツを指定しないと機能しません。contentが設定されていない場合、::after要素自体が作成されません。
対策：contentプロパティに空文字列でもよいので指定します。例えば、content: '';のように設定することで、::afterが機能します。

要素にdisplay: none;やvisibility: hidden;が設定されている

要素が非表示になっている場合、::afterも表示されません。display: none;やvisibility: hidden;が設定されている可能性があります。
対策：親要素や対象の要素が表示されているか確認し、displayやvisibilityの設定を調整します。

::afterの要素にサイズがない

::after要素が表示されるには、その要素に高さや幅、もしくは適切なスタイルが必要です。スタイルが設定されていない場合、::afterは表示されません。
対策：widthやheight、display: inline-block;など、適切なスタイルを指定して要素が表示されるようにします。

共通するCSSコード

.css-sample-container {
  width: 100%;
  height: 150px;
  margin-bottom: 30px;
  padding: 10px;
  border: 2px solid black;
  position: relative;
}

.css-sample-box {
  background-color: #f0f0f0;
  line-height: 150px;
  font-size: 18px;
  font-weight: bold;
}

::afterでテキストを追加

指定した要素の後ろにテキストを追加します。

HTMLコード

<div class="css-sample-container after-text">
  <span class="css-sample-box">要素の内容</span>
</div>

CSSコード

.after-text::after {
  content: " - ::afterの内容";
  color: blue;
}

表示結果

要素の内容

::afterで画像を追加

指定した要素の後ろに画像を表示します。displayをinline-blockに指定します。

HTMLコード

<div class="css-sample-container">
  <span class="css-sample-box after-block">要素の内容</span>
</div>

CSSコード

.after-block::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url('https://programming-cafe.com/wp-content/uploads/colorphoto02.jpg');
  background-size: cover;
}

表示結果

要素の内容

まとめ

  • ::afterは、要素の後に追加のコンテンツやスタイルを挿入するために使用します。
  • テキストやブロック要素など、さまざまな形式で内容を追加できます。
  • 疑似要素の位置や表示形式を自由に設定できるため、装飾やレイアウト調整に便利です。
スポンサーリンク