ミギムキ

[CSS] hタグの見出しによく使うスタイルまとめ

文字の下に短いバーをつけた見出し

.under_bar { position: relative; padding: 0px 0px 1em; font-size: 24px; font-weight: bold; text-align: center; } .under_bar:before { position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); width: 2em; height: 4px; background-color: #3388dd; content: ""; }

文字の前に短いバーをつけた見出し

.front_bar { position: relative; padding: 0px 0px 0px 2em; font-size: 24px; font-weight: bold; } .front_bar:before { position: absolute; top: 50%; left: 0px; transform: translateY(-50%); width: 1em; height: 4px; background-color: #3388dd; content: ""; }
スポンサー広告

見出しの前に小さい四角をつけた見出し

.front_square { position: relative; padding: 0px 0px 0px 1em; font-size: 24px; font-weight: bold; } .front_square:before { position: absolute; top: 50%; left: 0px; transform: translateY(-50%); width: 0.5em; height: 0.5em; background-color: #3388dd; content: ""; }