[Solved]-How to use pseudo classes in styled components?-Reactjs

You can achieve it in the following way:

import styled from 'styled-components';

const div = styled.div`
    padding: 25px 80px;
    border-radius: 100px;
    margin: 15px 0px;
    border: none;
    border: 2px solid ${props => props.theme.colors.grey};
    &:focus {
        outline: none;
        border: 2px solid ${props => props.theme.colors.main};
    }
    &:after {
        content: "hi"
    }
`;

export default Input;

Input element doesn't allow the use of before and after pseudo classes