Topic: A:hover special task (Page 1 of 1)

I just came up with this idea and I'd like an opinion if it is feasable or doable at all.
We all know about how to change link hovers, visited etc. to different colors, remove the underline etc.
What i am trying to do now is to show the fact that there is a link behind a text by a text arrow (> ) in a different color than the text.

so what i am trying to do is

>> link <<

where the link text is grey and the little arrows are orange. Now i am looking for a way to do this with css entirely because i don't want non-css browsers to see the arrows but just a (ugly blue and underlined) link.

<´¯`·.¸ Patric ¸.·´¯`>

patric design: I don't understand what you are trying to do:

quote:

---

show the fact that there is a link behind a text by a text arrow (> ) in a different color than the text.

---

If you could elaborate I'm sure we could help Its the behind bit I don't get.

[edit: I wonder if you are looking for the :before and :after pseudo-elements which could be used to 'automatically' add those arrows to a specified link class - anyway have a look through this and a play and see if that is what you are after:
http://www.w3.org/TR/REC-CSS2/selector.html#before-and-after
it should degrade well in older browsers]

___________________
Emps

FAQs: Emperor

ok, for clarification, I made a little graphic:



so the >> parts are automaticly added to any a:link and a:hover in a certain div.

I've tried the links you gave me and found that the note part doesn't display in IE6 but works well in Mozilla. This is bad because i was hoping that there'd be a way to get this working across the main browsers.

<´¯`·.¸ Patric ¸.·´¯`>

[This message has been edited by patric design (edited 07-16-2002).]

In addition to Mozilla, Opera also supports :before and :after CSS elements. But, as you have noticed they are still not supported by IE. In order to make something like that in IE, you'll probably have to use an image (with arrows) and define it as a background for links (this is just from top of my head as example)...

Thanx mr. max!

I didn't know it was possible to use a background image on a link. I got it to work on a test page but i have trouble implementing it into the site as it has a combination of divs & spans.

I have

background-image: url(../images/linkbg.gif);

	background-repeat: no-repeat;

	padding-left: 22px;

	color: #999;

defined as the a tag. but then in my source i have this:

<div id="content2" class="row">

<span class="left" style="text-align: right"> 

<div id="links">

<a href="test.htm">test</a>

</div>

</span>

<span class="right" style="text-align: left">test

</span>

</div>

I only want the link background picture on all links inside the "content2" div.

How can that be done?

<´¯`·.¸ Patric ¸.·´¯`>

[This message has been edited by patric design (edited 07-18-2002).]

patric design: I must admit I'd probably wait for IE to catch up with the rest of the world and I'm not sure hwo that background image will work (got a link?) but to answer your question try:

content2 a:hover {

}

___________________
Emps

FAQs: Emperor

Emperor:

I got it to work finally. It looks good (in my opinion) and except for Opera (which displays the page incorrectly anyways) it works in every browser I've tried. Check it out:
http://www.patricdesign.com/exit.html

<´¯`·.¸ Patric ¸.·´¯`>

[This message has been edited by patric design (edited 07-18-2002).]

When I see it here, the arrows are behind the text as you'd suspect, I recon the padding or something isnt working, IE 5.0

Please figure out how to perfet this, I'd like to use similar too

I'd say knock out the padding and then in your actual code stick those &nbsp; things before and after within the <a>&</a> more work, but more compatable