如何使用填充在标题下方划线到标题大小

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来添加空间。像这样：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以通过以下方式添加CSS填充：padding-bottom: 5px。