今回解説していく内容は以下です！
本記事の内容
CSSの擬似要素 Before、Afterとは？
CSSの擬似要素について説明が難しかったので、一番わかりやすかった説明の サルワカ さんから引用させていただきました。
CSSの
::afterと::beforeは、疑似要素と呼ばれるものの1つです。これを使うと「HTMLには書かれていない要素もどきをCSSで作ることができる」のです。afterやbeforeがものすごく便利なのは「HTMLコードを汚すことなく様々な表現ができる」ということです。なお、検索エンジンはCSSである疑似要素をコンテンツの中身として見ていません。そのため、SEOを気にせずにユーザーのための自由な表現ができるのです。
出典元：サルワカ
この文からもっと説明すると、HTMLを書かずにCSSによってHTMLタグの前後に要素を追加できる！って感じですかね。詳しくは以下のサンプルを参考にみていってください！::before & ::After のサンプルはここから！
span[class^=”bar”]
classがのものだけ色を変える
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
１行目の色が<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=”#” > を使用しています。
:existと:disabledについて
inputタグにexistかdisabledを入れることにより、inputタグを有効また無効に設定することができます。また、placeholderを使うことにより、input内に文字を最初から入れることが可能となります。
input:exist{
background:#FFF;
}
input:disabled{
color:#FFF;
background:skyblue;
}
:checked
1番目のラジオボタンには <input type=”radio” >を入れています。
.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 を使い要素の追加を行なっています。
まとめ
いかがでしたか？よく使っているものからあまり使っていなかったもの等あったかと思います！便利だと思ったものだけまとめているので、ぜひ参考に使ってみてください。
コメント