中间带有单词的水平线的CSS技术

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试在中间添加一些文本的水平尺。例如：

-----------------------------------我的名字在这里------------ -----------------

有没有办法在CSS中做到这一点？没有所有“-”的破折号很明显。

回答：

这大致就是我要做的：通过border-bottom在containing上设置a ，h2然后再给h2a small 来创建该行line-

height。然后将文本放在span具有非透明背景的嵌套中。

h2 {
   width: 100%;
   text-align: center;
   border-bottom: 1px solid #000;
   line-height: 0.1em;
   margin: 10px 0 20px;
}
h2 span {
    background:#fff;
    padding:0 10px;
}
<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>

我仅在Chrome中进行过测试，但是没有理由它不能在其他浏览器中运行。

以上是 中间带有单词的水平线的CSS技术 的全部内容， 来源链接： utcz.com/qa/398106.html

回到顶部