html - 文本边框底部问题

Question

我有一个带有文本的div，我添加了一个border-bottom，但是底线宽度与文本宽度相等，有什么办法可以使这个底线比文本小得多吗？我想成为这张图片中的样子:

我的代码:

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