途中で色が変わる下線
途中で色が切り替わる下線です。色の組み合わせを楽しんでください。
見出し
Source Code
右上の「コピー」からご利用ください。
コピー
<div class="my-parts">見出し</div>コピー
.my-parts {
padding: .1em .4em;
margin: 0 0 1em;
color: #000;
border-bottom: solid .125em #3F51B5;
font-size: 24px;
font-weight: bold;
position: relative;
text-align: left;
}
.my-parts::after {
position: absolute;
content: '';
display: block;
left: 0;
bottom: -.125em ;
border-bottom: .125em solid #F44336;
width: 30%;
height: 100%;
}
