How to expand link on hoover? Add “<” “>” symbols around link?


Tags: html,css,html5,css3

Problem :

How can I make some symbols appear around my links on mouse over? For example I have some link:

<ul>
    <li><a href="#"><span>&LT;</span>Home<span>&GT;</span></a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Paintings</a></li>
</ul>

I mean I want these "< >" to slowly expand from behind the link then I hoover it. And to go back in and hide after I move mouse away. I know about css transitions and animations. I tried many ways but it does not work. Best result was when I used small images and opacity. But its not what I want. I want some nice smooth movement from behind link.

EDIT: Well, after some time in google I come across this website here. I try to make something similar as in his menu links. I'm not asking for complete code, just point me to the right direction :) Maybe its only done with JavaScript?



Solution :

Use :after and :before in css

HTML

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Paintings</a></li>
</ul>​

CSS

body{background:black}
li a{
    white-space: nowrap;
    color: transparent;
    display: block;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0px 0px 0px #fff;
    letter-spacing: 1px;
    -moz-transform: scale(0.5); 
    -ms-transform: scale(0.5); 
    -o-transform: scale(0.5); 
    -webkit-transform: scale(0.5); 
    transform: scale(0.5); 
    -webkit-transition: all 0.6s linear;
    -moz-transition: all 0.6s linear;
    -o-transition: all 0.6s linear;
    -ms-transition: all 0.6s linear;
    transition: all 0.6s linear;  text-decoration:none
}
li a:hover{
    text-shadow: 0px 0px 1px #fff;
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    -o-transform: scale(1); 
    -webkit-transform: scale(1); 
    transform: scale(1); 
    text-decoration:none
}
li a:hover:before{content:"<"}
li a:hover:after{content:">"}​

DEMO

But this doesn't support IE but works with modern browsers.


Answer 2

Well I went through the site which you are referring and I found it is made of pure css (There are 2 images used in css). Find the Demo below (CSS is pretty long so I am not pasting here)

LIVE DEMO 2


    CSS Howto..

    How to catch this nth-child() with css

    How do I control the height of the main content area no matter how much text is in there?

    How to expand input field to 100% of the parent

    How to get MetroUI CSS Datepicker value with javascript

    css how to get rounded corners on button.

    How can I place HTML in a JavaScript string and have it validate?

    How can I override an inline style with an external css?

    How to use CSS hover inside html-tag?

    How to integrate Thread and

    How do I make my banner image stretch to fit the width of the page if the page width exceeds image width?

    How to override some CSS class settings

    How to hide the first element on the page with particular css class? [duplicate]

    How to code vertical banner

    how to set background-image to pseudo element?

    How to create a custom shape - css

    how can i add extra element style for external css file?

    How to rotate the background image in css?

    How to center text over an image in a table using javascript, css, and/or html?

    CSS/CSS3 - How to make background-color in table row without spaces between table-cells?

    How to center a textarea using CSS?

    How do we add the spot bulging effect in css? [closed]

    How to convert template from table to div

    How to position a CSS triangle using ::after?

    How to make letters in SVG to be animatable individually?

    How to specify image size in webview css using dip?

    How to I center my submit button in CSS?

    How to change css using jquery in a php loop

    How to make a “” looks like a link with CSS?

    Show specific comment in LESS file when compiled to CSS while keeping all other comments hidden

    How quora put that image on their home page? [closed]