의사 요소 내용 앞에 :: after 또는 ::에 줄 바꿈 추가

의사 요소 내용 앞에 :: after 또는 ::에 줄 바꿈 추가

---

페이지의 HTML 또는 PHP에 액세스 할 수 없으며 CSS를 통해서만 편집 할 수 있습니다. 사이트에서 수정을 수행하고 ::after또는 ::before의사 요소 를 통해 텍스트를 추가 했으며 이스케이프 유니 코드가 추가 된 내용 전후 공간과 같은 항목에 사용해야한다는 것을 알았습니다.

content속성에 여러 줄을 어떻게 추가 합니까?

예를 들어 HTML 구분선 요소는 내가 달성하고자하는 것을 시각화 하는 것입니다.

#headerAgentInfoDetailsPhone::after
{
 content: 'Office: XXXXX <br /> Mobile: YYYYY ';
}

---

본 content숙소의 상태 :

작성자는 'content'속성 다음에있는 문자열 중 하나에 "\ A"이스케이프 시퀀스를 작성하여 생성 된 컨텐츠에 줄 바꿈을 포함 할 수 있습니다. 이 삽입 된 줄 바꿈은 여전히 '공백'속성의 적용을받습니다. "\ A"이스케이프 시퀀스에 대한 자세한 내용은 "문자열"및 "문자 및 대소 문자"를 참조하십시오.

따라서 다음을 사용할 수 있습니다.

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

http://jsfiddle.net/XkNxs/

---

기본 사항을 설명하는 유용한 기사 (단, 줄 바꿈은 다루지 않음).

놀라운 물건 의사 요소의 전체 무리가 할 수있는

하나가 다른 요소 내에서 다음 줄로 나뉘는 두 개의 인라인 요소가 필요한 경우 pseudo-element : after with content : '\ A'및 white-space : pre를 추가하여이를 수행 할 수 있습니다.

HTML

<h3>
    <span class="label">This is the main label</span>
    <span class="secondary-label">secondary label</span>
</h3>

CSS

.label:after {
    content: '\A';
    white-space: pre;
}

---

툴팁에 새로운 줄이 있어야했습니다. 이 CSS를 : after에 추가해야했습니다.

.tooltip:after {
  width: 500px;
  white-space: pre;
  word-wrap: break-word;
}

자동 줄 바꿈이 필요한 것 같습니다.

또한 텍스트 중간에 \ A가 작동하지 않아 새 줄을 강제로 표시했습니다.

 
 

일했다. 그런 다음 그러한 도구 설명을 얻을 수있었습니다.

---

당신은 이것을 시도 할 수 있습니다

#headerAgentInfoDetailsPhone
{
    white-space:pre
}
#headerAgentInfoDetailsPhone:after {
    content:"Office: XXXXX \A Mobile: YYYYY ";
}

JS 피들

---

'새 줄 기호를 추가하는 의사 요소의 동적 내용 변경 방법'을 찾으려는 사람들을 위해 여기에 대한 답변이 있습니다.

HTML 문자 
는 JavaScript를 사용하여 HTML에 추가 할 수 없습니다. 문서 렌더링에서 문자가 변경되기 때문입니다.

대신 U + 000D 및 U + 000A 인이 문자의 유니 코드 표현을 찾아서 다음과 같이 할 수 있습니다

var el = document.querySelector('div');
var string = el.getAttribute('text').replace(/, /, '\u000D\u000A');
el.setAttribute('text', string);

div:before{
   content: attr(text);
   white-space: pre;
}

<div text='I want to break it in javascript, after comma sign'></div> 

희망이 누군가의 시간을 절약, 행운을 빌어 :)

---

에 줄 바꿈을 추가 ::after또는 ::before의사 요소 내용

.yourclass:before {
    content: 'text here first \A  text here second';
    white-space: pre;
}

---

Found this question here that seems to ask the same thing: Newline character sequence in CSS 'content' property?

Looks like you can use \A or \00000a to achieve a newline

---

<p>Break sentence after the comma,<span class="mbr"> </span>in case of mobile version.</p>
<p>Break sentence after the comma,<span class="dbr"> </span>in case of desktop version.</p>

The .mbr and .dbr classes can simulate line-break behavior using CSS display:table. Useful if you want to replace real <br />.

Check out this demo Codepen: https://codepen.io/Marko36/pen/RBweYY,
and this post on responsive site use: Responsive line-breaks: simulate <br /> at given breakpoints.

참고URL : https://stackoverflow.com/questions/17047694/add-line-break-to-after-or-before-pseudo-element-content