::before/::afterの使い方

CSS

2020.12.09

【css】::before / ::afterの使い方

今回の記事では、文字の横にアイコンを配置するときなどに便利な擬似要素(::before / ::after )についてご紹介します。

擬似要素とは

擬似要素とは、cssセレクタに追加することで、要素の前後に内容を挿入することができます。

下記の例のように、cssセレクタに「::before」または「::after」を付記し、追加したい文字を「content:”〜〜”;」で指定することで再現できます。

【HTML】

<p>擬似要素</p>


【CSS】

p{
  font-weight: bold;
 }
p::before{
  content:"「::before」で追加";
  font-weight: normal;
  margin-right: 15px;
  background: khaki;
  padding: 3px 13px 3px 0px;
}
p::after{
  content:"「::after」で追加";
  font-weight: normal;
  margin-left: 15px;
  background: khaki;
  padding: 3px 13px 3px 0px;
}

活用方法① 見出しに英語表記を追記する

見出しに英語の表記を追記する際に活用できます。
この場合は、positionを使用して位置を調整することで、画面幅に応じた位置変更などにも対応できます。

【HTML】

<h1>サンプル</h1>

【CSS】

h1{
  position: relative;
  display: inline-block;
  font-size: 16px;
}
h1::after{
  position: absolute;
  content: "sample";
  font-size: 8px;
  left: 50%;
  transform: translateX(-50%);
  bottom: -15px;
  color: royalblue;
}

活用方法② 文字の前に記号をつける

箇条書きを行うときの記号にも活用できます。

【HTML】

<ul>
  <li>あああ</li>
  <li>いいい</li>
  <li>ううう</li>
</ul>

【CSS】

li{
  list-style: none;
}
li::before{
  content: "◆";
  padding-right: 5px;
  color: royalblue;
}

上記の例では、「◆」を使用しましたが、ここは「url( )」で指定することで、お好きな画像を用いることもできます。

活用方法③ 文字に装飾をつける

これまでの例では、文字(または記号)を追加しましたが、装飾を追加することも可能です。

【HTML】

<ul>
  <li>あああ</li>
  <li>いいい</li>
  <li>ううう</li>
</ul>

【CSS】

ul{
  display: flex;
}
li{
  list-style: none;
  position: relative;
  padding: 10px;
  }
li::after{
  content: "";
  position: absolute;
  width:1px;
  height: 20px;
  background: royalblue;
  margin-left: 10px;
  top:50%;
  transform: translateY(-50%);
}

今回の場合は、「content: ” ” 」は空白とし、背景色で境界線を再現しています。追加する文字が無い場合でも「content」の指定は必要ですので、忘れないように気をつけてください。

このように様々な場面で活用できますので、ぜひ使ってみてください。

関連記事

  • text-alignが効かない時に考えられること

    2021.02.24

    【CSS】text-alignが効かない時に考えられること

    CSS

  • 2021.02.23

    【CSS】三角形の装飾でコンテンツの境界を区切る方法

    CSS

  • 2021.02.22

    【CSS】IEだけ崩れてしまうフォント対策

    CSS

おすすめ記事

  • 2020.12.02

    【css】スマホでパンくずを横スクロールさせる方法

    CSS

  • 2020.12.16

    【CSS】フォントサイズのpx、em、remの違い

    CSS

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design