html - 在两行之间制作小标题

Question

这可能是一个简单的问题，但是:

如何使用任何标题标签制作标题，但我希望标题介于两行之间:

HTML :

<h4>Staging Server</h4>

插图:

Answer 1

您可以使用 :after 和 :before :伪元素。

h4 span {
  position: relative;
  color: #00C8FF;
  padding: 0 15px;
  margin: 0 80px;
  font-size: 16px;
  font-weight: 100;
}
h4 span:before, h4 span:after {
  content: '';
  position: absolute;
  width: 60%;
  height: 1px;
  transform: translateY(-50%);
  top: 50%;
  background: #6F6F6F;
  left: -60%;
}
h4 span:after {
  left: 100%;
}

<h4><span>Staging Server</span></h4>