Style pseudo-selectors and classes in Styled Components
We will use the styled-components library to go over how to style pseudo-selectors and classes.
The pseudo-selectors, such as hover and before, work the exact same as regular CSS. In our element or class styling backticks, we can set them like :hover{} and :before{} to change what the element or component does.
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.