styled-component with react js

Question

I have an Button that I want to animate :after and ::before width onMouseOver from 0% to 50%, and when onMouseLeave from 50% to 0 i'm using react-hooks but it's working only onMouseOver what is my problem ?

my code in this link https://codesandbox.io/s/cold-haze-t7b4c

Answer 1

You could animate things with the following using styled components. Although you could do the same with just the padding instead of using :before and :after.

File: Button.js

import styled from "styled-components";

const Button = styled.button`
  display: flex;
  line-height: 30px;
  padding: 0;

  &:before,
  &:after {
    display: block;
    width: 0px;
    content: "";
    transition: all 250ms ease-in-out 0s;
  }

  &:hover {
    &:before, &:after {
      width: 50px;
    }
  }
`;

export default Button;

File: App.js

import React from "react";
import "./styles.css";
import Button from "./Button";

export default function App() {
  return (
    <div className="App">
      <Button>Hover Me</Button>
    </div>
  );
}