로그인 및 가입 버튼의 텍스트를 사용자 지정했는데, 첫 글자와 나머지 글자 사이에 몇 개의 공백을 추가하려고 합니다.
예를 들어, 다음과 같은 형태입니다:

하지만 버튼이 화면에 표시될 때는 다음과 같이 표시됩니다:
x Login
세 개의 공백이 하나만 남도록 줄어듭니다.
<span class="d-button-label"> 요소를 검사하면 x Login으로 표시되지만, 해당 텍스트를 더블클릭하면 원래의
세 개의 공백이 포함된 형태로 표시됩니다.
title remove extraneous space와 title prettify를 비활성화해 보았지만, 둘 다 효과가 없었습니다.
이것이 왜 발생하는지, 그리고 어떻게 수정할 수 있는지 아는 분이 있을까요?
수정: 이 게시물에도 동일한 현상이 발생했기 때문에, 세 개의 공백이 포함된 버전의 스크린샷을 추가하기 위해 게시물을 수정해야 했습니다.