Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Style pseudo-selectors and classes in Styled Components

    Sara VieiraSara Vieira

    In this lesson, we will use the styled-components library to go over how to style pseudo-selectors and classes.

    We will do this by styling the hover and before of a button.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Sara Vieira: 0:00 I have this button, which doesn't do anything. It also doesn't have a hover state, which is quite annoying. We want to let people know that they can actually use this button.

    0:11 How do you do this in styled components? Sometimes, there is a bit of hard work when it comes to adding hover and pseudo-elements, as well in CSS and JS libraries. In styled components, it works exactly the same way as you would do it in CSS.

    0:24 If I want to add a hover state, I can just come here and say, "Hover, open and close parentheses." If I say that I want to switch these two -- let me copy this over here. Let me say background, and this one is supposed to be the color now, if that's how you type color. There we go. Supposed to be the color.

    0:42 Now, if I hover over it, you can see that the color in the background have completely changed. Let's just add a transition -- all 200 milliseconds ease. Now, you can see that we have an animation for hover. The same thing works with before, so if I say before. I think I have an extra one, let me just remove it.

    1:04 If I say content equals and let me add an emoji. Now, you can see my most used emojis. It equals this, you can see that now, we have this as before. This is how you can style pseudo-elements and pseudo-classes using styled components.