1

我想用一个元素产生以下结果： 

<style type="text/css">
    div { background-color: #000; color: #fff; }
    span { border-bottom: 1px solid #f00; }
</style>
<div><span>White text, red underline, black background</span></div>

jFiddle：http: //jsfiddle.net/ARbmG/

这可能吗？

4

3 回答 3

2

相关：CSS 文本装饰下划线颜色 和 更改下划线颜色

不，您还不能以跨平台、跨浏览器的方式更改文本装饰下划线颜色。

Mozilla 解决方案：

span {
    color:#fff;
    text-decoration: underline;
    -moz-text-decoration-color: red;
    /* you'll have to search for other -proprietary selectors */
}

否则，将内联元素置于边框底部：您刚刚做到了。

于 2013-03-05T18:06:04.327 回答
2

我尝试了几件事，我想出了这个奇怪的小东西。我可能不推荐这样做，但它非常接近您只使用一个 HTML 标记想要的效果：

HTML

<span>White text, red underline, black background</span>

CSS

span {
    color: white;
    background: black;
    border-bottom: 2px solid red;
}

span:after {
    content: '_';
    position: absolute;
    width: 100%;
    background: black;
    color: black;
}

演示

http://jsfiddle.net/uWGx5/

于 2013-03-05T18:23:27.510 回答
0

我找到了一个更好的解决方案。

我的例子——白色文本、红色下划线、黑色背景——不是 100% 准确的。它必须是“块”元素，但背景可以是透明的。

这是一个新的：http: //jsfiddle.net/gpNZX/2/

神奇的是 :before 和 :after '\A'，这是一个转义的 ASCII 换行符。我也尝试使用 { content:' '; 显示：块；但它似乎并非在所有浏览器中都能 100% 工作。 

span {
    ...
    display: inline;
    ...
}
span:before {
    content: '\A';
    white-space: pre;
}
span:after {
    content: '\A';
    white-space: pre;
}
于 2013-03-07T02:51:30.657 回答