Skeleton placeholder for text

PlaceholderText.js

import React from 'react';
import styled from '@emotion/styled';
import { keyframes } from '@emotion/core';

const pulse = props => keyframes`
  0% {
    background-color: ${props.theme.colors.placeholder};
  }

  70% {
    background-color: ${props.theme.colors.placeholderAccent};
  }

  100% {
    background-color: ${props.theme.colors.placeholder};
  }
`;
const Text = styled.span`
  &::before {
    content: "${props => '_'.repeat(props.contentWidth)}";
    background-color: ${props => props.theme.colors.placeholder};
    color: transparent;
    border-radius: 3px;
    animation: ${props => pulse(props)} 4s ease infinite;
  }
`;

export default Text;