How to underline only the text, in a different color, in a single block element?

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?

If you want *only* the text underlined, then what you have is pretty much the easiest way to do it with the least amount of markup. — Cᴏʀʏ, Mar 05 '13 at 18:09
My example uses two elements, I want to know if it is possible to do it with only one — Null, Mar 05 '13 at 18:10
Yes CSS3 is acceptable--well, that is, if it can be done with CSS3 then I would like to see how! — Null, Mar 05 '13 at 18:12

score 2 · Accepted Answer · edited May 23 '17 at 11:50

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.

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.

edited May 23 '17 at 11:50

Community

1
1

answered Mar 05 '13 at 18:06

Milche Patern

19,632
6
35
52

Thanks Milche that is probably as close as I can get. I didn't know about text-decoration-color. My next question would be how to adjust the height of the underline, but it doesn't look like CSS3 will do that. – Null Mar 05 '13 at 18:25
Height of the underline ? Wo! Calm down ! – Milche Patern Mar 05 '13 at 18:32
I will probably end up using jQuery to insert the inner element for the underlines, I was just hoping to do it (somehow) with CSS only. – Null Mar 05 '13 at 19:13

insertusernamehere · Answer 2 · 2013-03-06T09:32:57.170

2

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/

edited Mar 06 '13 at 09:32

answered Mar 05 '13 at 18:23

insertusernamehere

23,204
9
87
126

what happens if there is other elements to influence the position absolute? :) – Toping Mar 05 '13 at 18:25
1

+1, its not the actual answer, but can help on future reference. :) – Toping Mar 05 '13 at 18:51
1

That is very clever... Definitely worth hanging on to for future reference. Thank you! – Null Mar 05 '13 at 19:08
@Ark I didn't answer you question yesterday. Sorry. This will work as long as the `` has `static` positioning. In this case the block will always fill the width of its parent element. It will also work if an `inline-block`-element will come right before the ``. In this case it will take the width that is left in this line. – insertusernamehere Mar 06 '13 at 09:31

score 0 · Answer 3 · answered Mar 07 '13 at 02:51

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

How to underline only the text, in a different color, in a single block element?

3 Answers3

Linked