Question

我正在尝试在标题后面重新创建这个风格化的线条边框（请参阅：https://www.vox.com在“热门故事”背后的黄色边框。我知道它是使用:before创建的，但我似乎无法让我的标题范围（projheader_name）将某些边框变白并且我得到了为某些边框创建的两个:before元素原因。一个在div class =“container”之后插入，另一个在span="projheader_name"之后插入。

#projheader {
  margin-top: 40px;
  padding-top: 20px;
}

#projheader .container {
  background-color: white;
}

#projheader h3 {
  margin-bottom: 10px;
}

.projheader_name {
  background-color: white;
  position: relative;
  z-index: 3;
}

#projheader :before {
  border-left: 4px solid #17A2B8;
  border-right: 4px solid #17A2B8;
  border-top: 4px solid #17A2B8;
  content: " ";
  height: 40px;
  left: 6%;
  position: absolute;
  right: 6%;
  top: 27%;
}

<section id="projheader">
  <div class="container">
    <span class="projheader_name">
          <h3>Landing Page: Sense</h3>
        </span>
  </div>
</section>

Answer 1

h3 {
  text-align: center;
  border: 4px solid #17A2B8; border-bottom: 0;
}
h3 span {
  position: relative;
  top: -0.7em;
  background: #fff;
  display: inline-block;
  padding: 0 0.7em;
}

<h3><span>LANDING PAGE</span></h3>

使用：before创建边框线样式

1 个答案: