SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

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

    With css.

  2. #2
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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;
     }

  3. #3
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    a:hover::before { content:"<"; }
    a:hover::after { content:">"; }
    Simon Pieters

  4. #4
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Internet Explorer doesn't support content generation though, does it?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote 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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •