CSS屏蔽线

好的，我还不允许上传图片，所以我会尝试这样解释：

我试图创造这种效果：

（更新：用图像替换文本）

=：带有背景图像的背景div

虚线的宽度为100%，且不与名称交叉

我不想让这一行超过名字，所以 我在找一种我可以放在那里的面具 越界

---

提前谢谢

在css中尝试

z-index

。

---

让上层得到较大的数字。

您可以添加带有

：before

和

：：before

伪元素的行，并使用边框设置样式：

#包装器{
显示器：flex；
边界：3倍双倍；
/*你可以在这里添加背景*/
}
#包装器：：之前，#包装器：：之后{
内容：''；
柔性生长：1；
边框顶部：1px虚线；
自对准：居中；
}

彼得

您可以使用flexbox执行此操作

这是一个

.wrapper{
宽度：400px；
显示器：flex；
弯曲方向：行；
背景：浅灰色；
}
.包装部{
柔性生长：1；
}
.线路{
高度：1px；
背景：黑色；
柔性生长：1；
位置：相对位置；
顶部：7px；
}
你好

到目前为止您尝试了什么？1）您尝试了什么？2） 如果你上传imgur并发布链接，我们可以将其嵌入到你的问题中。我真的还没有尝试过任何东西。。我首先使用了一种颜色作为背景，所以我只是简单地给了这个名字与背景相同的颜色这里有一个例子：StackOverflow不是一个“为我做作业”的网站。这是一个网站，如果开发者在编写代码时遇到困难并需要帮助，他们可以求助于该网站。请在您这边展示一些努力，并尝试先自己编写代码。那么，如果你陷入困境，我们将很乐意提供帮助

.wrapper {
  width: 400px;
  display: flex;
  flex-direction: row;
  background: lightgray;
}

.wrapper div {
  flex-grow: 1;
}

.line {
  height: 1px;
  background: black;
  flex-grow: 1;
  position: relative;
  top: 7px;
}

<div class="wrapper">
  <div class="line"></div>
  <span>hello</span>
  <div class="line"></div>
</div>