我正在尝试在中间添加一些文本的水平尺。例如：
-----------------------------------我的名字在这里------------ -----------------
有没有办法在CSS中做到这一点？没有所有“-”的破折号很明显。
中间带有单词的水平线的CSS技术
第3233篇《中间带有单词的水平线的CSS技术》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共7个回答
好的，这个比较复杂，但是除了IE <8之外，它都可以使用
<div><span>text TEXT</span></div>
div {
text-align: center;
position: relative;
}
span {
display: inline-block;
}
span:before,
span:after {
border-top: 1px solid black;
display: block;
height: 1px;
content: " ";
width: 40%;
position: absolute;
left: 0;
top: 1.2em;
}
span:after {
right: 0;
left: auto;
}
：before和：after元素是绝对放置的，因此我们可以向左拉一个，向右拉一个。同样，宽度（在这种情况下为40％）非常取决于内部文本的宽度。.必须考虑解决方案。至少，top: 1.2em即使您使用不同的字体大小，也要确保这些行或多或少地停留在文本的中心。
它似乎确实运作良好：http：//jsfiddle.net/tUGrf/3/
对于以后的（今天）浏览器，display:flexandd pseudo-elements 使其易于绘制。border-style，box-shadow甚至background对化妆也有帮助。
h1 {margin-top:50px;
display:flex;
background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);;
}
h1:before, h1:after {
color:white;
content:'';
flex:1;
border-bottom:groove 2px;
margin:auto 0.25em;
box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */
}<h1>side lines via flex</h1>这是基于Flex的解决方案。
h1 {
display: flex;
flex-direction: row;
}
h1:before, h1:after{
content: "";
flex: 1 1;
border-bottom: 1px solid #000;
margin: auto;
}
h1:before {
margin-right: 10px
}
h1:after {
margin-left: 10px
}<h1>Today</h1>JSFiddle：https：//jsfiddle.net/yoshiokatsuneo/3h1fmj29/
在尝试了不同的解决方案之后，我提供了一种适用于不同文本宽度，任何可能的背景且未添加额外标记的方法。
h1 {
overflow: hidden;
text-align: center;
}
h1:before,
h1:after {
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h1:before {
right: 0.5em;
margin-left: -50%;
}
h1:after {
left: 0.5em;
margin-right: -50%;
}<h1>Heading</h1>
<h1>This is a longer heading</h1>我在IE8，IE9，Firefox和Chrome中对其进行了测试。您可以在这里检查它http://jsfiddle.net/Puigcerber/vLwDf/1/
还有另一种方法：
span:after,
span:before{
content:"\00a0\00a0\00a0\00a0\00a0";
text-decoration:line-through;
}<span> your text </span>这大致就是我要做的：通过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中进行过测试，但是没有理由它不能在其他浏览器中运行。
JSFiddle：http : //jsfiddle.net/7jGHS/
相似问题
问题类别
给跨度添加填充以在文本和行之间留出更多空间。
示例：http：//jsfiddle.net/tUGrf/