如何在文本周围放置边框（CSS before after pseudo class 和padding相关）

Question

我正在尝试复制文本被居中边框围绕并在其周围填充的效果。 Example。尽管尝试使用与上述站点相同的方法，但边框覆盖了文本；我一定做错了我无法发现的事情。

非常感谢您的帮助。

.header {
  color:black;
  font-size:3rem;
  line-height:1.5;
}

 .header p {
  width:75%;
  position: relative;
  text-transform: uppercase;
  text-align:center;
}

 .header p::before {
  display:block;
  content:'';
  width:100%;
  position: absolute;
  background:#000;
  height:3px;
  top:50%;
}

 .header p > span{
  padding:0 1rem; 
  display:inline-block;
  max-width:75%;
  position: relative;
}

<div class="header">
   <p><span>Work</span></p>
</div>

这就是我想要得到的结果。

Answer 1

已添加

.header p {
      position: relative;
      text-transform: uppercase;
      text-align: center;
      display: inline-block;
      padding: 40px;
      border: 3px solid black;
      margin-left: 50%;
      transform: translatex(-50%);
    }

删除了 :before css，删除了 width 使用 display: inline-block 并使用 padding 在文本和边框之间给出 space。并使用 margin 和 transform 属性将其置于中心

.header {
  color:black;
  font-size:3rem;
  line-height:1.5;
}

 .header p {
  position: relative;
  text-transform: uppercase;
  text-align: center;
  display: inline-block;
  padding: 40px;
  border: 3px solid black;
  margin-left: 50%;
  transform: translatex(-50%);
}

 /*.header p::before {
  display:block;
  content:'';
  width:100%;
  position: absolute;
  background:#000;
  height:3px;
  top:50%;
}*/

 .header p > span{
  padding:0 1rem; 
  display:inline-block;
  max-width:75%;
  position: relative;
}

<div class="header">
  <p><span>Work</span></p>
 </div>

Answer 2

你只需要 span 上的背景颜色

.header {
  color:black;
  font-size:3rem;
  line-height:1.5;
}

 .header p {
  width:75%;
  position: relative;
  text-transform: uppercase;
  text-align:center;
}
.header p::before {
  display:block;
  content:'';
  width:100%;
  position: absolute;
  background:#000;
  height:3px;
  top:50%;
z-index:0;
}

 .header p > span{
  padding:0 1rem; 
  display:inline-block;
  max-width:75%;
  position: relative; 
  background-color:#fff;
z-index:1;
}

<div class="header">
  <p><span>Work</span></p>
 </div>

如何在文本周围放置边框（CSS before after pseudo class 和padding相关）

How to place a border around the text (CSS before after pesudo class and padding related)

html

css

border

padding