CSSの擬似要素について

　CSSに”擬似要素”なるものあったのを知ったのはチーム開発していた時のこと

 

　当時、開発でVIEWのデザインを担当していた自分はCSSの知識が乏しく、最低限の要素は知っていたが、知らない要素は調べれば出てくるよとのことだったので、特に気にせず、カリキュラムの進捗などを優先してして学習していた。

 

　そして開発に入り、謎の要素に会った

 

f:id:natori_gorira:20200430181154p:plain

 

青緑のような色をした奴↑

 

最初はborderの下線で表示するのだと考えていたが、検証を使って確認して見てもそんな要素が見つからない

 

代わりに下の方に”::after”と書いてあった、調べたら”擬似要素”というらしい

 

定番だと

::afterと::beforeがあって、これを使うと「HTMLには書かれていない要素もどきをCSSで作ることができる」らしい

 

タグと要素

 

使い方としては

h1::before {
  content: '内容';  〜スタイル指定〜
}

.example::after {
  content: '内容';
  〜スタイル指定〜
}

beforeは”直前に内容を追加”

afterは”直後に内容を追加”

するという違いがある

 

疑似要素を使うメリット

「HTMLコードを汚すことなく様々な表現ができる」ということです。なお、検索エンジンはCSSである疑似要素をコンテンツの中身として見ていません。そのため、SEOを気にせずにユーザーのための自由な表現ができるのです

 

今回はhttps://saruwakakun.com/html-css/basic/before-after/サルワカより抜粋させて頂きました。

 

　練習で模写することも増えたのですが、擬似要素使っているサイトは多いので、自身も継続して学習していきたいと思います。