CSS hover add <> to link, is it possible?

**oyvindmc** · Sep 23, 2006 03:12

Hi
Is it possible to add <> when a link is hovered.
Something like this:
link
<link> (when mouseover/hover)

With css.

**Stormrider** · Sep 23, 2006 03:21

you can use the content generation in css, but that won't work in some browsers.

Maybe try something like this:

HTML Code:

<a href="someplace.html">
 <span class="hover">&lt;</span>Link Text<span class="hover">&gt;</span>
</a>

Code:

a span.hover {
  visibility: hidden;
 }
 
 a:hover span.hover {
  visibility: visible;
 }

**zcorpan** · Sep 23, 2006 04:00

Code:

a:hover::before { content:"<"; }
a:hover::after { content:">"; }

**Stormrider** · Sep 23, 2006 07:13

Internet Explorer doesn't support content generation though, does it?

**Paul O'B** · Sep 23, 2006 07:25

Originally Posted by stormrider

does it?

Unfortunately no it doesn't support it

You will need to add this to your snippet to make it work in ie.

Code:

a:hover {visibility:visible}

IE won't activate the span effect unless something changes in the anchor on hover. The visibility:visible does this without any other changes needed.

User Tag List