【HTML＆CSS】擬似クラス::after ::beforeについてまとめてみた

対象者

・CSSで擬似クラスを使ってｈｔｍｌを整えようとしている方

手順目次

1.擬似クラスとは

2.：：afterの実例

実際の手順と実例

1.擬似クラスとは

擬似クラスとは、セレクタの後に付け加えて、指定するスタイルを適用する状態を決めるものです。
今回はその中でも::afterに関して触れています。

2.：：afterの実例

• 後ろの文章のCSSを変える！
• 文を記号ではさむ

たとえば、class="example"の要素の前後にカゴカッコ『』をつけるように指定してみましょう。

HTML

  <p class="example">これは例文です</p>
  .example:before{
    content: '『';
    color: skyblue;/*色を変える*/
  }

CSS

    .example:after{
      content: '』';   /*変更したいCSSをシングルクォーテーション内に入力*/
      color: skyblue;/*色を変える*/
    }

完成！

記号とかのCSS整えるときに活躍します！