如何在标题文本上制作图例集样式的“背景线”？

小编典典

如何在标题文本上制作图例集样式的“背景线”？

css

我正在尝试设置标题文本的样式，使其类似于默认图例文本在字段集中的显示方式。也就是说，我想要一条删除线般的线条出现在文本上，但不是穿过文本。我似乎找不到有关如何实现此目标的任何信息，并且由于Google在其他许多问题上总是将我引向Stack
Overflow寻求答案，所以我认为这里有人可以给我建议。

为了更加清晰。我试图在标题文本上获得这种效果：

~~~~ 标题文字居中~~ ~~

有什么办法吗？

阅读 292

2020-05-16

共1个答案

小编典典

如果文字需要换行，则无法使用。在IE7中，将没有行。

HTML：

<h2><span>Centered Header Text</span></h2>

CSS：

h2 {
    text-align: center;
    display: table;
    width: 100%;
}
h2 > span, h2:before, h2:after {
    display: table-cell;
}
h2:before, h2:after {
    background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
    width: 50%;
    content: ' ';
}
h2 > span {
    white-space: nowrap;
    padding: 0 9px;
}

2020-05-16