Почему мой пишущий компонент не выровнен по вертикали?

Question

Я работаю над созданием портфолио веб-сайта и использую этот фрагмент кода для ввода:

const TypingParagraph = styled.span`
  font-family: "Times New Roman";
  margin-left: 6rem;
  color: white
  &::before {
    content: '_';
    color: transparent
  }
  &::after {
    content: '_';
    display: inline_flex;
    animation: ${rotate} 0.7s linear infinite;
  }
`;

По какой-то причине он не выравнивается по вертикали с его родительским компонентом. Это выглядит как this :

Также странно, как изменение размера шрифта также меняет поля.

Любая помощь по этому вопросу будет принята с благодарностью!