CODEWITHSUNDEEP
reactjscss-selectorsstyled-componentspseudo-element
Medinho
Medinho

Reputation: 223

How to set pseudo selector on hover with styled-components

Using styled-components in React, I wonder how to set pseudo selectors like :before or :after when hovering an element. This is css example:

enter image description here

So how to translate the css code in red rectangle with styled-components?

Upvotes: 0

Views: 3856

Answers (1)

Emre
Emre

Reputation: 61

If the styled component is the same as the target element. You can do the following:

const Link = styled.a`
  &:hover:before {
    width: 100%;
  }
`;

If you are targeting an element nested inside the styled component:

const LinksWrapper = styled.div`
  a:hover:before {
    width: 100%;
  }
`;

Upvotes: 1

Related Questions