strip input with material-like focus effect

CardInput.tsx

const StyledCardElementContainer = styled.div<{ isfocused: string }>`
	border-bottom: 0.5px solid gray;
	padding: 6px;
	height: 33px;
	
    ::after {
      content: "";
      position: absolute;
      width: 0px;
      height: 2px;
      background: #7f43ff;
      transition: all .25s;
      margin: 6px 20px 0 20px;
      left: 46%;
    }
    
    ${props => props.isfocused === 'true'
    ?
    ':after {' +
    'width: 92%;' +
    'height: 2px;' +
    'left: 0;' +
    '}'
    : ''}
	
	&:hover {
	    border-bottom: 2px solid #7f43ff88;
	}
}
`;