CSSの下線は見出しの幅よりも小さいですか？
CSSを使用して、見出しの下線を見出しテキストよりも狭くすることは可能ですか？ H1の見出しには次のスタイルがあります。
h1 {
font-weight: 300;
display: inline-block;
padding-bottom: 5px;
border-bottom: 1px #d2202f solid;
}
これにより、H1の見出しの下に細い赤い下線が表示されます。しかし、下線が見出しのテキストの50％になるようにすることは可能ですか？
:before（または:after）で擬似要素を使用できます。
h1 {
font-weight: 300;
display: inline-block;
padding-bottom: 5px;
position: relative;
}
h1:before{
content: "";
position: absolute;
width: 50%;
height: 1px;
bottom: 0;
left: 25%;
border-bottom: 1px solid red;
}