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

Question

I want to produce the following result with a single element:

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

Is this possible?

Answer 1

I tried a couple of things and I came up with this odd little thingy. I may not recommend this, but it's very close to what you want using only one single HTML tag:

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

Demo

http://jsfiddle.net/uWGx5/

Answer 2

related to : CSS text-decoration underline color and Changing Underline color

NO, you cannot 'yet' change text-decoration underline color in a cross-plateform, cross-browser way.

• Non-working solution or jsFiddle-working solution
• W3C infos or /css-text-decor-3
• MSDN infos

Mozilla soluce :

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

Otherwise, to border-bottom an inline element : You just did it.

Answer 3

I found an even better solution.

My example--white text, red underline, black background--wasn't 100% accurate. It has to be a "block" element, but the background can be transparent.

Here is a new one: http://jsfiddle.net/gpNZX/2/

The magic is the :before and :after '\\A', which is an escaped ASCII line feed. I also tried using { content:' '; display:block; } but it didn't seem to work 100% in all browsers.

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