html - 如何使用填充在标题下方画线到标题大小

Question

我想在标题下面放一条线到标题大小，如果我使用 border-bottom 那么线和标题之间就没有空格了。所以我需要一些其他的解决方案。

 h2 {
    color: #0085c3;
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 33px;
    font-weight: 600;
    line-height: 30px;
    margin: 40px auto 25px;
    text-align: center;
}
h2::after {
    background: #000;
    display: block;
    height: 2px;
    width: 50px;
}

Answer 1

你使用的border-bottom很好，现在你可以使用padding-bottom来增加空间。像这样:

h2 {
  color: #0085c3;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 33px;
  font-weight: 600;
  line-height: 30px;
  margin: 40px auto 25px;
  text-align: center;
}
h2 span {
  border-bottom: 1px solid #0085c3;
  padding-bottom: 10px;
}

<h2><span>ADVERTISING</span></h2>