[CSS] 文字の下に短いバーをつけた見出しを設置したい
やりたいこと
- 文字の下に短いバーをつける見出しの使い勝手がいいので、サッと使えるようにしたい
サンプルコード
.under_bar {
position: relative;
padding: 0px 0px 1em;
font-size: 24px;
text-align: center;
}
.under_bar::after {
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
width: 1.5em;
height: 5px;
background-color: #3388dd;
content: "";
}
仕組み、解説、補足など
- バーの長さをemで指定すれば、文字の大きさを変えたときに連動して長さが変わってくれるので便利です
- paddingでバーの領域分取っておけば、bottom: 0pxで位置が決まりますし、この見出しの後に続くコンテンツとの間のマージンが取りやすくなります
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。