:before & :afterの使い方
2023年8月25日
8月の終わりがそろそろ近づいてきてますね…
しかも、猛暑日が続きますね…
体調には気を付けて、水分補給もまめに取ってくださいね。
ついでに、塩分補給も忘れないようにね！
さてと、話題に戻して…
:before & :afterの使い方
他業者がデザインしたCSSの中身を見ると全く理解のできてないデザインが組み込まれてますね…
同じ技術者としてはホンマに恥ずかしいんですわ…
擬似要素タグ「:before」と「:after」
擬似要素…対象の要素の一部を指定して装飾を適用する、もしくは対象の要素に擬似的に要素を追加して装飾を適用するセレクタのことです。
beforeとafterの基本的な設定方法
テキストの前後に「『』」を付けたいときのコーディングを教えますね。
<p>こんにちは</p>p{
padding:0 20px;
position:relative;/* 疑似要素の時にはこれが必要 */
}
p:before{
content: '『';
display: block;
left:0;
margin: auto;
padding: 0;
position: absolute;
top:0;
}
p:after{
content: '』';
display: block;
margin: auto;
padding: 0;
position: absolute;
right:0;
top:0;
}
実行結果
でも、もう一つ、CSSを簡潔にまとめてみたらスッキリすると思うので、まとめてみようか！
p{
padding:0 20px;
position:relative;/* 疑似要素の時にはこれが必要 */
}
p:before,
p:after{
display: block;
margin: auto;
padding: 0;
position: absolute;
top:0;
}
p:before{
content: '『';
left:0;
}
p:after{
content: '』';
right:0;
}
見てどうでしたか？
スッキリしたでしょ！
ではまた！
- Leonardo
- 今日は愛車の点検！ 2024年12月22日
- マーケティングについて考えること 2024年12月21日
- 冬になると手がカサカサになる… 2024年12月20日
- 転職したほうがいい？～Part.2～ 2024年12月19日
- 転職したほうがいい？ 2024年12月18日