: after 가상 요소에 줄 바꿈을 추가 할 수 있습니까?

: after 가상 요소에 줄 바꿈을 추가 할 수 있습니까?

---

<br />특정 클래스에 를 추가하고 싶습니다 . : after 가상 클래스를 사용하면 단순히 <br />텍스트로 표시 됩니다.

이 작업을 수행하는 방법이 있습니까?

IE8 내부이므로 브라우저 문제는 문제가되지 않습니다. 만약 내가한다면

<span class="linebreakclass">cats are</span> brilliant

새로운 라인에 "brilliant"가 나타나기를 원합니다.

---

HTML 태그를 렌더링 할 수는 없지만 다음과 같이 스타일을 설정할 수 있습니다.

.needs-space:after
{
    content: " ";
    display: block;
    clear: both; /* if you need to break floating elements */
}

여기서 주요 설정은 display: block;This will render : after content inside a DIV. 그리고이 유사 요소는 모든 최신 브라우저에서 지원됩니다. IE를 포함합니다. 이렇게 말하면 사용자와 브라우저를 알고 있어야합니다.

---

\A줄 바꿈으로 렌더링되는 이스케이프 시퀀스 를 사용할 수 있습니다 .

.new-line:after {
  white-space: pre-wrap;
  content: "\A";
}

이 방법은 속성 에 대한 CCS 2.1 사양 에 언급되어 content있습니다.

작성자는 속성 "\A"뒤에있는 문자열 중 하나에 이스케이프 시퀀스를 작성하여 생성 된 콘텐츠에 줄 바꿈을 포함 할 수 있습니다 'content'. 이 삽입 된 줄 바꿈은 여전히 'white-space'속성의 영향을받습니다 .

---

더 나빠집니다-: after 클래스는 IE6에서도 작동하지 않습니다 (그리고 아마도 다른 브라우저에서도 마찬가지입니다).

여기서 정말로 원하는 것은 요소 하단에 여백을 제공하여 간격을 제공하는 것입니다.

간단히

.myElement {
    margin-bottom: 1em;
}

참고 URL : https://stackoverflow.com/questions/1672879/can-you-add-line-breaks-to-the-after-pseudo-element