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

2024.09.13
スポンサーリンク

::beforeは疑似要素の一つで、指定した要素の前に内容を挿入することができます。この疑似要素はHTMLでは直接記述されず、CSSで追加する形式となります。

スポンサーリンク

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

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

注意点と関連情報

::beforeは要素の前に追加されますが、contentプロパティで指定した内容がないと、表示されません。デフォルトではインライン表示となるため、ブロック表示にしたい場合はdisplay: block;を指定する必要があります。

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

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

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

サイズやレイアウトが指定されていない

::before要素は、デフォルトではインライン要素として扱われるため、適切なスタイルが指定されていないと視覚的に表示されないことがあります。
対策：widthやheight、display: 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;
  position: relative;
  line-height: 150px;
  font-size: 18px;
  font-weight: bold;
}

::beforeでテキストを追加

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

HTMLコード

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

CSSコード

.before-text::before {
  content: "::beforeで追加されたテキスト ";
  color: blue;
}

表示結果

要素の内容

::beforeでブロック要素を追加

指定した要素の前に画像を表示するブロック要素を追加します。

HTMLコード

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

CSSコード

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

表示結果

要素の内容

::beforeで絶対配置された要素を追加

指定した要素の前に絶対位置で配置された要素を追加します。

HTMLコード

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

CSSコード

.before-position::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  background-color: red;
}

表示結果

要素の内容

まとめ

  • ::beforeは要素の前にコンテンツを追加するために使用します。
  • テキストやブロック要素など、さまざまな内容を挿入できます。
  • 疑似要素は表示方法や位置を柔軟に調整でき、レイアウトのカスタマイズに役立ちます。
スポンサーリンク