テキストのボーダーボトムの問題

Question

私はdivのテキストを持っていますが、ボーダーボトムを追加しますが、ボトムラインの幅はテキストの幅と同じですが、このボトムラインをテキストよりもずっと小さくする方法はありますか？

マイコード：

.title-line { 
 

 
border-bottom: 1px solid rgba(0, 0, 0, 0.2); 
 
    font-family: lato; 
 
    font-size: 18px; 
 
    font-weight: normal; 
 
    padding: 0 0 1em; 
 
    text-align: center; 
 
}

<dt class="title-line">My Text Example</dt>

Answer 1

はい、あなたの代わりにborder-bottomの（::afterのような）擬似要素を使用することができます私は、この画像のようになりたいです。

.title-line { 
 
    position: relative; /* important for absolute child to work */ 
 
    font-family: lato; 
 
    font-size: 18px; 
 
    font-weight: normal; 
 
    padding: 0 0 1em; 
 
    text-align: center; 
 
} 
 

 

 
.title-line::after { 
 
    content: ''; /* required to display pseudo elements */ 
 
    height: 1px; /* this works like a border-width */ 
 
    width: 10%; /* you can use a percentage of parent or fixed px value */ 
 
    background: #CCC; /* the color of border */ 
 
    position: absolute; 
 
    bottom: 0; /* position it at the bottom of parent */ 
 
    margin: 0 auto; left: 0; right: 0; /* horizontal centering */ 
 
}

<dt class="title-line">My Text Example</dt>