疑似要素で見出しの下線を作る

以下はSCSS
.section-title{ /要素と要素の位置/
font-size: 48px;
font-weight: 700;
text-align: center;
padding-bottom: 12px;
position: relative; /28pxは$::afterの4pxを含めている/
font-family: $font-en;/英語だから、英語のfontを使う/

&::after{
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 60px;
    height: 4px;
    background: $color-main;

説明：positionを使用することで、疑似要素は親要素（基準）の中にあります。
　　　bottom:0ということは、親要素の下境界線の内側にくっついている状態です。
　　　Cardというテキストと疑似要素の間の距離は12px-4px = 8px