Good try but that isn’t working as required:)
The background image needs to start after the text and not simply be rubbed out by it. The image starting point should be where the text ends.
The problem with this approach (and the others above) is that it fails on multi-line headings.
No our examples work fine on multi lines just by using line-height in stead of height. The image always starts after the text stops.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<title>
image after text demo
</title>
<style type="text/css">
p {
overflow:hidden;
line-height:25px;
zoom:expression(
runtimeStyle.zoom=1,
insertAdjacentHTML('beforeEnd','<span class="after"></span>')
);
}
p .after,
p:after {
content:" ";
display:inline-block;
width:999em;
height:25px;
margin:0 -999em 0 0.4em;
vertical-align:middle;
background:red;/* apply your image here */
}
</style>
</head><body>
<p>This is the text This is the textThis is the textThis is the textThis is the textThis is the textThis is the textThis is the textThis is the text</p>
</body></html>