If you mean something like this:
Edit: here's a better way, which only requires one HTML element and so won't be weird when read by non-CSS-styling clients like search engines, screen readers, RSS, 'no style' apps etc (thanks to Dominic for suggesting trying
The important code (add colours to this):
<div class="someclass" data-text="Some text">Some text</div>
The HTML attribute can be anything - I used
data-text because it's descriptive and avoids undesirable side effects (e.g. you could use
title but it would create mouseovers in some browsers).
If you want
display:block; on the main (
.top) element, add something like
width: 100%; to the inner (
.bottom) element so it fills it.
If you're using jQuery, you can apply this style to any element really easily, avoiding having to manually type out the
data-text duplicated bit:
Unfortunately it requires duplicating the text.
If you're very good with JS you could make this only apply if the media display mode is
Key code: (
.bottom is inside
<div class="top">Hi<div class="bottom">Hi</div></div>)