: after를 사용하여 요소 뒤에 공백 (“”) 추가

일부 내용 뒤에 공백을 추가하고 싶지만 content: " ";작동하지 않는 것 같습니다.

이것은 내 코드입니다.

h2:after {
    content: " ";
}

... 작동하지 않지만 다음과 같이 작동합니다.

h2:after {
    content: "-";
}

내가 뭘 잘못하고 있죠?

설명

코드가 공백을 삽입한다는 점은 주목할 가치가 있습니다.

h2::after {
  content: " ";
}

그러나 즉시 제거됩니다.

에서 익명 인라인 박스 ,

이후 'white-space'속성에 따라 축소되는 공백 내용은 익명 인라인 상자를 생성하지 않습니다.

그리고에서 '공백'모델을 처리 ,

줄 끝의 공백 (U + 0020)에 '공백'이 '보통', '지금 줄'또는 '사전 줄'로 설정되어 있으면 제거됩니다.

해결책

그래서 당신은 공간을 설정, 제거하지 않으려는 경우 white-space에 pre또는 pre-wrap.

h2 {
  text-decoration: underline;
}
h2.space::after {
  content: " ";
  white-space: pre;
}

<h2>I don't have space:</h2>
<h2 class="space">I have space:</h2>

비 공백 공백을 사용하지 마십시오 (U + 00a0). 단어 사이의 줄 바꿈을 방지해야합니다. 그것들은 축소가 불가능한 공간으로 사용되어서는 안되며 의미가 없습니다.

이스케이프 된 유니 코드를 통해 지정해야합니다. 이 질문 은 관련 이 있으며 답변 이 포함되어 있습니다.

해결책:

h2:after {
    content: "\00a0";
}

인라인 블록 컨테이너를 사용하여 워크 플로 타임 라인에 일련의 개별 이벤트를 표시하기 때문에 패딩 대신이 기능이 필요했습니다. 타임 라인의 마지막 이벤트에는 그 뒤에 화살표가 필요하지 않았습니다.

다음과 같이 끝났습니다.

.transaction-tile:after {
  content: "\f105";
}

.transaction-tile:last-child:after {
  content: "\00a0";
}

gt (쉐브론) 캐릭터에 fontawesome을 사용했습니다. 어떤 이유로 든 "content : none;" 마지막 타일에서 정렬 문제가 발생했습니다.