CSS 疑似要素の::beforeと::afterのサンプル

CSSの疑似要素の::beforeと::afterのサンプルです。

目次

before 要素の開始タグの後にCSSを適用(before)
  beforeを任意の位置に移動させる
after 要素の終了タグの前にCSSを適用(after)
  afterを任意の位置に移動させる

要素の開始タグの後にCSSを適用(before)

セレクタ::before{
    content:"文字"
}
  • ::beforeは、指定した要素の開始タグの後にCSSを適用します。
  • contentに指定した文字列が表示されます。文字列を表示しない場合は空文字("")にします。
  • CSS3では、::beforeとコロンを2つ記述します。CSS2では、:beforeのようにコロン1つでした。

サンプル

図は、p要素のクラスに::beforeを指定したサンプルです。
P要素の開始タグの後に::beforeが設置されます。画面の表示では::beforeの箇所に文言が表示されます。

上記サンプルのコードです。

<style>
  .t31::before {
    content: " こんにちは ";
    color: red;
  }
</style>
<body>
  <p class="t31">テスト1</p>
  <p class="t31">テスト2</p>
  <p>テスト3</p>
  <p class="t31">テスト4</p>
</body>

2行目は、::beforeを指定しています。
8,9,11行目は、P要素の開始タグの後に"こんにちは"という文字が表示されます。(イメージ図参照)

以下のイメージになります。

テスト1

テスト2

テスト3

テスト4

 

beforeを任意の位置に移動させる

  • ::beforeを指定した要素を任意の位置に移動できます。
  • 1.::beforeを指定した要素の親要素にpositionプロパティのrelativeを指定する
  • 2.::beforeを指定した要素にpositionプロパティのabsoluteと位置のプロパティ(topとleftまたはbottomとright)を指定する
<style>
  .d3 {
    position: relative;
  }
  .test1::before {
    position: absolute;
    content: " こんにちは ";
    top: 30px;
    left: 50px;
  }
</style>
<body>
  <div class="d3">
    <p class="test1">テスト1</p>
  </div>
</body>

以下のイメージになります。

「こんにちは」が指定した値の分ずれています。
top:30px・・・基準の上辺までの距離を30pxとする。(下にずれる)
left:50px・・・基準の左辺までの距離を50pxとする。(右にずれる)

以下はMDNの疑似要素::beforeのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/::before

 

要素の終了タグの前にCSSを適用(after)

セレクタ::after{
    content:"文字"
}
  • ::afterは、指定した要素の終了タグの前にCSSを適用します。
  • contentに指定した文字列が表示されます。文字列を表示しない場合は空文字("")にします。
  • CSS3では、::afterとコロンを2つ記述します。CSS2では、:afterのようにコロン1つでした。

サンプル

図は、p要素のクラスに::afterを指定したサンプルです。
P要素の終了タグの前に::afterが設置されます。画面の表示では::afterの箇所に文言が表示されます。

上記サンプルのコードです。

<style>
  .t41::after {
    content: " こんにちは ";
    color: red;
  }
</style>
<body>
  <p class="t41">テスト1</p>
  <p class="t41">テスト2</p>
  <p>テスト3</p>
  <p class="t41">テスト4</p>
</body>

2行目は、::afterを指定しています。
8,9,11行目は、P要素の終了タグの前に"こんにちは"という文字が表示されます。(イメージ図参照)

以下のイメージになります。

テスト1

テスト2

テスト3

テスト4

 

afterを任意の位置に移動させる

  • ::afterを指定した要素を任意の位置に移動できます。
  • 1.::afterを指定した要素の親要素にpositionプロパティのrelativeを指定する
  • 2.::afterを指定した要素にpositionプロパティのabsoluteと位置のプロパティ(topとleftまたはbottomとright)を指定する
<style>
  .d4 {
    position: relative;
  }
  .test1::after {
    position: absolute;
    content: " こんにちは ";
    top: 30px;
    left: 50px;
  }
</style>
<body>
  <div class="d4">
    <p class="test1">テスト1</p>
  </div>
</body>

以下のイメージになります。

「こんにちは」が指定した値の分ずれています。
top:30px・・・基準の上辺までの距離を30pxとする。(下にずれる)
left:50px・・・基準の左辺までの距離を50pxとする。(右にずれる)

以下はMDNの疑似要素::afterのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/::after

関連の記事

CSS 子孫/子/隣接/一般兄弟セレクタのサンプル
CSS 属性セレクタのサンプル(要素名[属性名="値"])
CSS 擬似クラス(:link/:visited/:hover/:active/:focus)
CSS 奇数/偶数行(nth-child)と否定(not)
CSS positionのrelativeで要素を配置する
CSS positionのabsoluteで要素を配置する

△上に戻る