▲TOPへ戻る

疑似要素の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を使えば、一括で処理できます。

Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero a ducimus minima cum officiis.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero a ducimus minima cum officiis.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero a ducimus minima cum officiis.

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ