Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Before and After pseudo classes used with styled-components

What is the proper way to apply :before and :after pseudo classes to styled components?

I know that you can use

&:hover {}

to apply the :hover pseudo class to a styled-component.

Does this work for All pseudo elements like before and after?

I have tried using the &:before and &:after strategy with some rather complex examples and i'm not sure if my attempts are not working because i've got something wrong with my example or it just doesn't work like that.

Does someone have some insight on this? Thank you.

like image 691
archae0pteryx Avatar asked Aug 24 '17 21:08

archae0pteryx


People also ask

What are before and after pseudo classes?

CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input> ). This effectively allows you to show something on a web page that might not be present in the HTML content.

How are pseudo classes used in style links?

A pseudo-class is used to define a special state of an element. For example, it can be used to: Style an element when a user mouses over it. Style visited and unvisited links differently.

Which is the correct order for using pseudo classes?

The recommended order is link,visited,focus,hover,active. The :link and :visited pseudo-classes should generally come first. Next should be :focus and :hover—they're specified now so that they override and apply to both visited and unvisited links.


1 Answers

Pseudo-selectors in styled-components work just like they do in CSS. (or rather, Sass) Whatever isn't working is likely a problem in your specific code, but that's hard to debug without seeing the actual code!

Here is an example of how to use a simple :after:

const UnicornAfter = styled.div`   &:after {     content: " 🦄";   } `;  <UnicornAfter>I am a</UnicornAfter> // renders: "I am a 🦄" 

If you post your code I'll likely be able to help debug your specific issue!

like image 51
mxstbr Avatar answered Sep 22 '22 08:09

mxstbr