일부 내용 뒤에 공백을 추가하고 싶지만 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). 단어 사이의 줄 바꿈을 방지해야합니다. 그것들은 축소가 불가능한 공간으로 사용되어서는 안되며 의미가 없습니다.
답변
답변
인라인 블록 컨테이너를 사용하여 워크 플로 타임 라인에 일련의 개별 이벤트를 표시하기 때문에 패딩 대신이 기능이 필요했습니다. 타임 라인의 마지막 이벤트에는 그 뒤에 화살표가 필요하지 않았습니다.
다음과 같이 끝났습니다.
.transaction-tile:after {
content: "\f105";
}
.transaction-tile:last-child:after {
content: "\00a0";
}
gt (쉐브론) 캐릭터에 fontawesome을 사용했습니다. 어떤 이유로 든 “content : none;” 마지막 타일에서 정렬 문제가 발생했습니다.