CSSの擬似要素【Before,After】を解説

CSS
Toshi
Toshi
CSSの擬似要素(::before,::after)ってなんのために使うんだろうそう思ったことはありませんか?今回は、そんな擬似要素の::beforeと::afterについて解説していきます。サンプルコードがあるので参考にしてみてください

今回解説していく内容は以下です!

 本記事の内容

・CSSの擬似要素 Before、Afterとは?


CSSの擬似要素 Before、Afterとは?

CSSの擬似要素について説明が難しかったので、一番わかりやすかった説明の サルワカ さんから引用させていただきました。

CSSの::after::beforeは、疑似要素と呼ばれるものの1つです。これを使うと「HTMLには書かれていない要素もどきをCSSで作ることができる」のです。

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

出典元:サルワカ

この文からもっと説明すると、HTMLを書かずにCSSによってHTMLタグの前後に要素を追加できる!って感じですかね。詳しくは以下のサンプルを参考にみていってください!::before & ::After のサンプルはここから!

span[class^=”bar”]

classが“bar”のものだけ色を変える

span[class^="bar"] {
color : skyblue;
}

:nth-child(n番目)

2番目の文字だけ色が変わるように:nth-child(2)にしている

下の文字はリストで作成しているが・を表示したくない場合は、list-style:none;を指定すると・がなくなる。

  • 2番目だけ
  • 文字の色が
  • 変わる
.list:nth-child(2){
color: skyblue;
}

::first-letter

最初の文字だけ色をつける

.fl::first-letter{
color:skyblue;
font-size:2em;
}

::first-line

1行目の色が<br>
変わっていることがわかります。

.fline::first-line{
color:skyblue;
}

:active

「クリックしている時だけ色が変わる」
.active:active{
color:skyblue;
}

:focus


↑クリック後、他のところをクリックすると色が元に戻る。

.focus:focus{
color:skyblue;
}

:hover

マウスカーソルを合わせると色が変わる

.hover:hover{
color:skyblue;
}

:hover :active :focus を使用しbuttonに動きをつけてみました。詳しくは以下の記事をご覧ください!

また、focusについて詳しくは書いていませんが目次を作りたい!jsを使わず、項目にfocusさせる方法。

この記事で少しふれています。

記事を違うタブで開かせるために上記では <a href=”#” target=”_blank”> を使用しています。

:existと:disabledについて

inputタグにexistかdisabledを入れることにより、inputタグを有効また無効に設定することができます。また、placeholderを使うことにより、input内に文字を最初から入れることが可能となります。


input:exist{
background:#FFF;
}
input:disabled{
color:#FFF;
background:skyblue;
}

:checked

1番目のラジオボタンには <input type=”radio” disabled>を入れています。



.check1:checked{
 width:10px;
}
.check2:checked{
 width:5px;
}

::before と ::after

マウスカーソルを合わせると…

疑似要素のBとAが出てきましたね!

.pseudo:hover::before{
content:"B";
}
.pseudo:hover::after{
content:"A";
}

とても便利なので、::before ::afterの使い方は覚えておきたいところです。

上記の記事では、jQueryを用いて Before After を使い要素の追加を行なっています。

まとめ

Toshi
Toshi

いかがでしたか?よく使っているものからあまり使っていなかったもの等あったかと思います便利だと思ったものだけまとめているので、ぜひ参考に使ってみてください。

 

 

Toshikazu

Nagasaki→Tokyo→China→Fukuoka

1992/07/02

2017年からブログを運営。
現在エンジニアとして福岡で働いています。

Toshikazuをフォローする
CSS
シェアする

コメント

テキストのコピーはできません。