如何制作字段集图例风格的“背景线"?在标题文本上?

2022-01-11 00:00:00 legend header css fieldset

我正在尝试将标题文本设置为类似于您的 默认图例文本 出现在字段集中；也就是说，我想要一条类似删除线的线来达到但不是通过文本.我似乎找不到任何关于如何完成此任务的信息，而且由于在许多其他问题上，Google 总是将我引导到 Stack Overflow 寻求答案，我想这里有人可以给我建议.

I'm attempting to style heading text similar to how your default legend text appears in fieldsets; that is to say, I'd like a strikethrough-like line to come up to, but not through, the text. I can't seem to find any information on how I might accomplish this, and since on numerous other questions Google's always directed me to Stack Overflow for answers, I thought someone here may be able to give me advice.

为了更清楚.我正在尝试对标题文本产生这种影响:

For greater clarity. I'm attempting to get this effect on header text:

<罢工>                               居中的标题文本                              

有什么办法吗?

推荐答案

参见: http://jsfiddle.net/thirtydot/jm4VQ/

如果文本需要换行，这将不起作用.在 IE7 中，不会出现一行.

If the text needs to wrap, this won't work. In IE7, there will be no line.

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;
}

相关文章