ミギムキ

[CSS] 「ポイント1」みたいな装飾付きの見出しを画像なしで設置したい

やりたいこと

サンプルコード

html

<h2 class="point" data-num="1">俺より先に寝てはいけない</h2> <h2 class="point" data-num="2">俺より後に起きてもいけない</h2> <h2 class="point" data-num="3">めしは上手く作れ</h2> <h2 class="point" data-num="4">いつもきれいでいろ</h2>
スポンサー広告

CSS

.point { position: relative; padding: 0px 0px 0px calc(60px + 0.5em); margin: 30px 0px 0px; } .point:before, .point:after { position: absolute; top: 50%; left: 0px; transform: translateY(-50%); width: 60px; height: 60px; border-radius: 50%; color: #fff; text-align: center; box-sizing: border-box; } .point:before { padding: 0.75em 0px 0px; background-color: #3388dd; font-size: 14px; content: "Point"; } .point:after { padding: 1.25em 0px 0px; font-size: 20px; content: attr(data-num); }

仕組み、解説、補足など

スポンサー広告