小编典典

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

html

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

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

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


阅读 452

收藏
2020-05-10

共1个答案

小编典典

这大致就是我要做的:通过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中进行过测试,但是没有理由它不能在其他浏览器中运行。

2020-05-10