다음을 사용하여 요소 뒤에 공백("")을 추가합니다.

다음을 사용하여 요소 뒤에 공백("")을 추가합니다.

일부 내용 뒤에 빈 공간을 추가하고 싶지만,content: " ";효과가 없는 것 같습니다.

내 코드는 다음과 같습니다.

h2:after {
    content: " ";
}

이것은 작동하지 않지만, 이것은 다음과 같습니다.

h2:after {
    content: "-";
}

내가 뭘 잘못하고 있는 거지?

이스케이프 유니코드를 통해 지정해야 합니다.이 질문은 관련이 있고 답을 포함하고 있습니다.

해결책:

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

설명.

코드에 공백이 삽입됩니다.

h2::after {
  content: " ";
}

그러나 즉시 제거됩니다.

익명 인라인 상자에서

이후 '화이트스페이스' 속성에 따라 축소되는 화이트스페이스 콘텐츠는 익명 인라인 상자를 생성하지 않습니다.

그리고 '화이트 스페이스' 처리 모델로부터,

줄의 끝에 있는 공백(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(쉐브론) 문자에 폰타썸을 사용했습니다.어떤 이유로든 "content: none;"은 마지막 타일에서 정렬 문제를 발생시키고 있었습니다.

시도...

<span>first part</span>
<span>&nbsp;&#8203;</span>
<span>second part</span>

.."."​"(또는 "​")는 필요한 경우 "첫 번째 부분"과 "두 번째 부분"을 래핑할 수 있습니다.

유사 요소의 "\00a0"에는 문제가 있을 수 있는데, 이는 정의 요소의 텍스트 장식을 사용하기 때문입니다. 예를 들어 정의 요소가 밑줄을 그으면 유사 요소의 공백도 밑줄을 그기 때문입니다.

이 문제를 해결하는 가장 쉬운 방법은 유사 요소의 불투명도를 0으로 정의하는 것입니다. 예를 들어, 다음과 같습니다.

element:before{
  content: "_";
  opacity: 0;
}

element::after { 
    display: block;
    content: " ";
}

이것은 저에게 효과가 있었습니다.

언급URL : https://stackoverflow.com/questions/5467605/add-a-space-after-an-element-using-after