疑似要素のafterとbeforeで文字の前後に文字や記号をを追加する方法

疑似要素とは

疑似要素の::afterと::beforeをタグ、クラスやidに追加することにより、要素の前後に表現を加えることができます。

これにより、HTMLコードを汚すことなく、いろいろな表現をすることができるというメリットがあります。

::afterと::beforeの書き方

HTML

 <p class="price">100</p>

これだけでは、表示されるのは「100」だけです。

cssで::afterを追加すると

CSS

 .price::after{
      content: '円';
      font-size: .6em;
  }

100の後ろに「円」が表示されました。

cssで::beforeを追加すると

CSS

 .price::before{
      content: '税込';
      font-size: .7em;
  }

100の前に「税込」が表示されました。

HTML

 <p class="price">100</p>

CSS

  .price::after{
    content: '円';
    font-size: .6em;
  .price::before{
    content: '税込';
    font-size: .7em;
  }

FontAwesomeで記号やイラストを追加する

HTML

  <div class="wrapper">
    <p class="pnt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero a ducimus minima cum officiis.</p>
    <p class="pnt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero a ducimus minima cum officiis.</p>
    <p class="pnt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero a ducimus minima cum officiis.</p>
  </div> 

CSS

 .pnt::before{
    font-family: FontAwesome;   //これを記述
    content: '\f058';     //これを記述  「\」をお忘れなく！
    color: orange;
    margin-right: 20px;
  }

FontAwesomeのページで以下のコードをcontent''に記述します。\をお忘れなく。

以下のようになります。すべてのpタグの先頭に<i class="far fa-check-circle"></i>を記述しなくても、疑似要素::beforeを使えば、一括で処理できます。