Question

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

<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/

这可能吗？

Answer 1

我尝试了几件事，然后我想出了这个奇怪的小东西。我可能不推荐这个，但它只使用一个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/

Answer 2

与：CSS text-decoration underline color和Changing Underline color

相关

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

Mozilla soluce：

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

否则，以内联元素为边界底部：你刚刚做到了。

Answer 3

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

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

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

魔术是：之前和之后：'\ A'，这是一个转义的ASCII换行符。我也试过用{content：'';显示：块;但它似乎并没有在所有浏览器中100％工作。

span {
    ...
    display: inline;
    ...
}
span:before {
    content: '\A';
    white-space: pre;
}
span:after {
    content: '\A';
    white-space: pre;
}

如何在单个块元素中仅为不同颜色的文本加下划线？

3 个答案: