デザインコード紹介
Chapter2 見出しやテキストの装飾
2色の線を重ねた見出し – 疑似要素
更新日:
HTML
<h2 class="heading">採用情報について</h2>
CSS
.heading {
position: relative;
padding-bottom: 24px;
width: 100%;
font-size: 26px;
border-bottom: 5px solid #c7c7c7;
}
.heading::after {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 70px;
height: 5px;
background-color: #e5c046;
}
できるだけ誌面とコードの色を近づけるように調整しましたが、印刷物と画面表示との差異はどうしても発生してしまいます。サポートサイトでご確認いただける色が実際に表示されます。