Posted by Tomasz Chmielewski on 11/26/07 12:54

Jonathan N. Little schrieb:
> Ben C wrote:
>> On 2007-11-23, Jonathan N. Little <lws4art@centralva.net> wrote:
>>> Tomasz Chmielewski wrote:
>>>> I have a part of a page which contains text links to other subpages:
>>>>
>>>> <a href="subpage.html">Subpage</a>
>>>>
>>>> Now, I'd like each link to contain a tiny image after each text:
>>>>
>>>> <a href="subpage.html">Subpage<img src="arrow.png"></a>
>>>>
>>>>
>>>> Is it possible to do something similar with CSS only?
>>>>
>>>> Something like:
>>>>
>>>> a:after { content: blah_image }
>>>>
>>>> Which would add an image after each link?
>>> no because generated content is just play text, no html.
>>
>> [...]
>>
>> You can generate images with, e.g.:
>>
>> content: url("blah.png");
>>
>> You also should be able to do:
>>
>> a:after
>> {
>> content: "";
>> background-image: url("blah.png");
>
>> }
>
> Ah, yes I remember seeing that was how your can get around the "no html"
> for generated content problem, at least for images. Hmmm could you do a
> funky CSS include? element:after { content: url(someinclude.html); }?
>
> Nope doesn't seem to work. Good thing, if it did it is a scary thought
> how how one could abuse it!
>
> To OP though, my background image method will work in IE, the generated
> content methods will not.

Oh, this is getting problematic for me.

All content is generated with a CMS engine, and adding a class="subpage"
to each link element which needs an arrow is a bit hard for
non-technical people.

So, let's say the page looks like that - and I would like to add these
tiny images to div with id="arrows":

<div id="normal">
<a href="normal.html">Normal link</a>
</div>
<div id="arrows">
<a href="subpage.html">Link with an arrow image</a>
</div>


How should my CSS look like? I'm trying to achieve it for some time now,
with no success.


--
Tomasz Chmielewski
http://wpkg.org

[Back to original message]