[CSS] ::beforeと::afterのサンプル

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

目次

サンプル ::beforeとは
  beforeを任意の位置に移動させる
  ::afterとは
  afterを任意の位置に移動させる

:beforeとは

セレクタ::before{
    content:"文字"
}
  • ::beforeは、指定したセレクタの開始タグの後にCSSを適用します。
  • contentに指定した文字列が表示されます。文字列を表示しない場合は空文字("")にします。
  • CSS3では、::beforeとコロンを2つ記述します。CSS2では、:beforeのようにコロン1つでした。
<style>
  .p1::before {
    content: "beforeです";
    color: red;
  }
</style>
<body>
  <p class="p1">テストです</p>
</body>

htmlで::beforeが適用されたコード

p要素の開始タグの後に::beforeが配置されます。

画面の表示

Pタグにある「テストです」の前に::beforeで指定した文字が表示されます。
::beforeの箇所にcontentで指定した文字が入るイメージです。

 

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

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

htmlで::beforeが適用されたコード

画面の表示

::beforeの箇所にcontentで指定した文字が入りtopとleftで指定した値の分ずれています。
top:30px・・・基準の上辺までの距離を30pxとする。(下にずれる)
left:50px・・・基準の左辺までの距離を50pxとする。(右にずれる)

上記は、topとleftに0pxを指定した場合です。基準の上辺と左辺です。

::afterとは

セレクタ::after{
    content:"文字"
}
  • ::afterは、指定したセレクタの終了タグの前にCSSを適用します。
  • contentに指定した文字列が表示されます。文字列を表示しない場合は空文字("")にします。
  • CSS3では、::afterとコロンを2つ記述します。CSS2では、:afterのようにコロン1つでした。
<style>
  .p1::after {
    content: "afterです";
    color: red;
  }
</style>
<body>
  <p class="p1">テストです</p>
</body>

htmlで::afterが適用されたコード

p要素の終了タグの前に::afterが配置されます。

画面の表示

Pタグにある「テストです」の後に::afterで指定した文字が表示されます。
::afterの箇所にcontentで指定した文字が入るイメージです。

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

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

htmlで::afterが適用されたコード

p要素の終了タグの前に::afterが配置されます。

画面の表示

::afterの箇所にcontentで指定した文字が入りtopとleftで指定した値の分ずれています。
top:30px・・・基準の上辺までの距離を30pxとする。(下にずれる)
left:50px・・・基準の左辺までの距離を50pxとする。(右にずれる)

上記は、topとleftに0pxを指定した場合です。基準の上辺と左辺です。

関連の記事

CSS 子孫/子/隣接/一般兄弟セレクタのサンプル
CSS 属性セレクタのサンプル(要素名[属性名="値"])
CSS 画面に動きをつける(:hover/:active/:focus他)
[CSS] nth-child 奇数/偶数行にCSSを適用
CSS positionのrelativeで要素を配置する
CSS positionのabsoluteで要素を配置する

△上に戻る