文本边框底部问题

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>