文字边框底部问题

Question

我有一个带文字的div，我添加了一个边框底部，但底线宽度与文字宽度相等，有没有办法让这个底线比文字小得多？我希望像这样的形象：

我的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

是的，您可以使用伪元素（例如::after）代替border-bottom。

＆＃13;

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;