Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Taylor Plante
Taylor Plante
22,283 Points
Posted by Taylor Plante
Taylor Plante
22,283 Points

Issue with :hover position change in Chrome

I'm building a site of my own and wanted to use the :hover pseudo-class to bring in a font character (home icon) that's positioned before a div using the :before pseudo-class. In Safari I was able to generate a nice slide-in animation by changing the relative position of the icon with the following code:

<div class="logo">
  Content inside of div...
</div>

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot');
    src:url('fonts/icomoon.eot') format('embedded-opentype'),
        url('fonts/icomoon.woff') format('woff'),
        url('fonts/icomoon.ttf') format('truetype'),
        url('fonts/icomoon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.logo:before {
    font-family: 'icomoon';
    content: "\e603";
    position: relative;
    top: -40px;
    font-size: 2em;
}
.logo:hover:before {
    position: relative;
    top: 50px;
    right: 0px;
    -webkit-transition:  .2s ;
    -moz-transition:  .2s ;
    -ms-transition:  .2s ;
    -o-transition:  .2s ;
    transition:  .2s ;
}

@media screen and (min-width: 800px) {
    .logo {
        float: left;
        position: relative;
        margin-left: 30px;
    }
    .logo:before {
        position: relative;
        top: 50px;
        right: 70px;
    }
    .logo:hover:before {
        right: 0;
    }
}

3 Answers

Adam Saland
Adam Saland
10,688 Points
Adam Saland
Adam Saland
10,688 Points

I think the ':before' is a CSS 2 psuedo-selector, and '::before' is a CSS 3 revision of a psuedo-element. I'm not entirely sure but see: https://developer.mozilla.org/en-US/docs/Web/CSS/::before For more info on browser support. I believe that may help with the animation support.

Adam Saland
Adam Saland
10,688 Points
Adam Saland
Adam Saland
10,688 Points

.logo:hover::before { content: "conent to the insert before"; }

Chris Coyier on CSS-Tricks has a lot of good information as well :

http://css-tricks.com/transitions-and-animations-on-css-generated-content/

Taylor Plante
Taylor Plante
22,283 Points
Taylor Plante
Taylor Plante
22,283 Points

Hmm, adding the extra colon didn't seem to fix it, but I tried changing the transition so that it would instead just go from an opacity of 0 to 1, and for some reason that allowed for the slide transition to work simultaneously (which looks pretty cool). I have no idea why that worked, but if anybody else wants to add their insight I'd like to understand the reason behind it.