Pseudo 요소 후에 라인 브레이크를 추가 할 수 있습니까?

Question

나는 a <br /> 특정 수업에. 사용 : 의사 클래스 후에는 단순히 표시됩니다 <br /> 텍스트로.

이 일을 할 수있는 방법이 있습니까?

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

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

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

Answer 1

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

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

여기의 주요 설정은입니다 display: block; 이것은 렌더링됩니다 :후에 a 내부의 내용 DIV. 그리고이 의사 요소는 모든 최신 브라우저에서 지원됩니다. IE 포함. 이것을 말하면 사용자와 브라우저를 알고 있어야합니다.

Answer 2

당신이 사용할 수있는 \A 뉴 라인으로 렌더링하는 탈출 시퀀스 :

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

이 방법은 다음에 언급되었습니다 CCS 2.1 사양 용 content 재산:

저자는 "\A" 다음 문자열 중 하나에서 시퀀스를 탈출합니다 'content'재산. 이 삽입 된 라인 브레이크는 여전히 그 적용을받습니다 'white-space' 재산.

Answer 3

더 나빠집니다.

나는 당신이 여기서 정말로 원하는 것이 간격을 제공하기 위해 요소의 맨 아래에 마진이라고 생각합니다.

간단히

.myElement {
    margin-bottom: 1em;
}