対象者
・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整えるときに活躍します！
↧