CSS挑战，我能在不引入更多HTML的情况下做到这一点吗？

假设我有任何块或内联块，其中包含文本。比如一段或一段或几段。如果该标记具有“separator”类，我希望它显示如下：

所有内容都居中（文本对齐：居中；即可）。 这里有一个棘手的部分：在居中内容的两侧，会出现一条（垂直居中的）线

下图说明了我的想法：

如果我必须引入更多的HTML，那就忘了它-不感兴趣。

我是一个很长时间的CSS用户，但我不明白这一点。。。还有人有主意吗？虽然我很喜欢它，但最好没有CSS3（用于工作…由于兼容性，不能使用新东西）

---

示例问题：

将我置于中心位置

要使某个东西动态化，您可以执行以下操作：

<ul>
    <li>
        <div class='lineLeft'></div>
        <div class='inlineText'></div>
        <div class=lineRight'></div>
    </li>
</ul>

很抱歉打断您，但是在HTML/CSS中，如果不引入至少一个附加标记，就无法做到这一点

唯一可以近似的方法是使用：before和：after伪类，但它无法插入html内容，更不用说根据内容具有可变宽度的内容了。
好了：

<p class="separator"></p>

p.separator {
    line-height:1em;
    border-bottom:1px solid red;
}
p.separator:before {
    content:"TEXT";
    position:relative;
    left:50%;
    margin-left:-2.5em; /* half the number of chars */
    padding:0 0.3em;
    top:0.5em;
    background:white;
}


p、 分离器{
线高：1米；
边框底部：1px纯红；
}
p、 分隔符：之前{
内容：“文本”；
位置：相对位置；
左：50%；
左边距：-2.5em；/*字符数的一半*/
填充：0.3em；
顶部：0.5em；
背景：白色；
}

​
 这在Firefox中有效：

.separator {
    text-align: center;
    height: 0.5em;
    border-bottom: 2px solid black;
    margin-bottom: 0.5em;
}
.separator:first-line {
    background-color: white;
}

您可以使用背景图像作为线条，然后为文本提供一系列黑色文本阴影，以模拟2-3px笔划，覆盖文本周围和文本之间的背景

即

-示例

基于文本阴影支持，向后兼容性将是一个问题。（有一个IE过滤器可能有助于兼容性）。
我开发了一个不依赖于
背景：白色的解决方案，也就是说，您可以看到分隔符文本背后的内容。只需运行示例，您就会看到：


忽略图中那些杂乱的标签。。。这是CSS示例，不是组织示例


.separator>*{
显示：内联块；
垂直对齐：中间对齐；
}
.分离器{
文本对齐：居中；
边界：0；
空白：nowrap；
显示：块；
溢出：隐藏；
填充：0；
保证金：0；
}
.separator:之前，.separator:之后{
内容：“；
高度：2倍；
宽度：50%；
背景颜色：灰色；
保证金：0 5px 0 5px；
显示：内联块；
垂直对齐：中间对齐；
}
.分隔符：之前{
左边距：-100%；
}
.分隔符：之后{
保证金权利：-100%；
}

文本


带有多行的文本

文本


带有多行的文本

文本


带有多行的文本

文本


带有多行的文本

/**
使背景具有非纯白图案的样式，
以便您可以看到它在分隔符后面可见。
**/
.light主题。分隔符：之前，.light主题。分隔符：之后{
背景色：黑色；
}
.light-theme.separator、.light-theme.separator{
颜色：黑色；
}
.dark主题。分隔符：之前，.dark主题。分隔符：之后{
背景色：白色；
}
.dark theme.separator、.dark theme.separator{
颜色：白色；
}
.质地{
填充：10px；
}
.纹理3{
背景色：红色；
颜色：白色；
}
.纹理1{
//-webkit框大小：内容框；
//-moz框大小：内容框；
//框大小：内容框；
//宽度：320px；
//高度：320px；
//边界：无；
//字体：普通100%/普通Arial，Helvetica，无衬线；
//颜色：rgb（255、255、255）；
//-o-text-overflow：剪辑；
//文本溢出：剪辑；
背景：-webkit线性梯度（63度，rgb（21,21,21）5px，rgba（0,0,0,0）5px），-webkit线性梯度（-117度，rgb（21,21,21）5px，rgba（0,0,0,0）5px），-webkit线性梯度（63度，rgb（34,34,34）5px，rgba（0,0,0）5px），-webkit线性梯度（-117度，rgb（34,34,34）5px，rgba（0,0,0）5px），-webkit线性梯度（0,27,27）10px，rgba（0,0,0,0）10px），-webkit线性梯度（-90度，rgb（29,29,29）25%，rgb（26,26,26）25%，rgb（26,26,26）50%，rgba（0,0,0,0）50%，rgba（0,0,0,0）75%，rgb（36,36）75%，rgb（36,36）100%，rgb（19,19）；
背景：-莫兹线性梯度（27度，rgb（21,21,21）5px，rgba（0,0,0,0）5px），-莫兹线性梯度（207度，rgb（21,21,21）5px，rgba（0,0,0,0）5px），-莫兹线性梯度（27度，rgb（34,34,34）5px，rgba（0,0,0）5px），-莫兹线性梯度（207度，rgb（34,34,34）5px，rgba（0,0,0）5px），-莫兹线性梯度（90,0,0,0,0,0），莫兹线性梯度（180度，rgb（29,29,29）25%，rgb（26,26,26）25%，rgb（26,26,26）50%，rgba（0,0,0,0）50%，rgba（0,0,0,0）75%，rgb（36,36,36）75%，rgb（36,36）100%，rgb（19,19）；
背景：线性梯度（27度，rgb（21,21,21）5px，rgba（0,0,0,0）5px），线性梯度（207度，rgb（21,21,21）5px，rgba（0,0,0,0）5px，线性梯度（27度，rgb（34,34,34）5px，rgba（0,0,0,0）5px），线性梯度（207度，rgb（34,34,34）5px，rgba（0,0,0）5px，rgba（0,0），线性梯度（90度，b（27,27,34）5px，rgba（10 px），rgba（0,0,0,0,0）（180度，rgb（29,29,29）25%，rgb（26,26,26）25%，rgb（26,26,26）50%，rgba（0,0,0,0）50%，rgba（0,0,0,0）75%，rgb（36,36,36）75%，rgb（36,36,36）100%，rgb（19,19）；
背景位置：0 5px，10px 0，0 10px，10px 5px，0 0，0 0；
-webkit背景来源：填充框；
背景来源：填充框；
-webkit背景剪辑：边框框；
背景剪辑：边框框；
-webkit背景尺寸：20px 20px；
背景尺寸：20px 20px；
}
.结构2{
//-webkit框大小：内容框；
.center-separator {
    display: flex;
  line-height: 1em;
  color: gray;
}

.center-separator::before, .center-separator::after {
    content: '';
    display: inline-block;
    flex-grow: 1;
    margin-top: 0.5em;
    background: gray;
    height: 1px;
    margin-right: 10px;
    margin-left: 10px;
  }