::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」の指定は必要ですので、忘れないように気をつけてください。

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

0

関連記事

  • 2021.05.14

    【CSS】backgroundで行う背景画像の複数指定

    CSS

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.04.21

    【CSS】要素がはみ出てしまう時のチェック事項 / box-sizingの指定

    CSS

おすすめ記事

  • コーディングで画像を好きな形に切り抜く方法

    2021.02.10

    【CSS】コーディングで画像を好きな形に切り抜く方法【IEにも対応】

    CSS

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

  • 2019.03.15

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

    WordPress

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!