文本邊框底部問題

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

是的，你可以使用僞元素（如::after），而不是border-bottom。

.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>