html - 特定部分的底部边框

Question

我有一个 DIV，里面是一个带有一些描述的 H1 标签，我可以给整个 H1 标签一个边框底部，但是如何给它的特定部分一个边框底部，就像在下面的片段。

添加 SPAN 标签是可行的，但是在给边框添加填充以添加空间后，它会错误地传播并破坏文本格式。

HTML:

  <div class="row">
    <div class="col-md-4 text-center" id="column1">
        <h3 class="">
        <span>Responsive  Web Design </span>
        </h3>
        <br />
        <br />
        <p>
            Coupling aesthetic design sensibilities with.
        </p>
    </div>

CSS:

#column1 > h3 > span{
border-bottom: 5px solid #16a085;
padding-bottom: 20px;
}

我在这里做错了什么？

Answer 1

我已经使用 :pseudo elemnt 给元素添加了边框

/** = for better view not required */

.row {
  text-align: center;
  display: inline-block;
  border: 1px solid red;
}

/** = end */
span {
  display: block;
  position: relative;
  padding: 15px 0;
}
span:after {
  content: '';
  position: absolute;
  width: 30px; /* change as per your design */
  height: 2px; /* change as per your design */
  background: blue; /* change as per your design */
  bottom: 0;
  left: 50%;
  margin-left: -15px;
}

<div class="row">
  <div class="col-md-4 text-center" id="column1">
    <h3 class="">
        <span>Responsive  Web Design </span>
        </h3>
    <br />
    <br />
    <p>
      Coupling aesthetic design sensibilities with.
    </p>
  </div>