의사 요소 콘텐츠 ::이후 또는 ::이전에 줄 바꿈을 삽입하는 방법은 무엇입니까?

의사 요소 콘텐츠 ::after 또는 ::before의 줄바꿈

CSS의 ::after 또는 ::before 의사 요소 콘텐츠를 사용자 정의하면 기능이 향상될 수 있습니다. 요소의 표현. 그러나 콘텐츠 속성에 여러 줄을 삽입하면 문제가 발생합니다.

이 문제를 해결하기 위해 CSS는 "A" 이스케이프 시퀀스를 사용하여 줄 바꿈을 포함하는 메커니즘을 제공합니다. 아래 규칙은 다음 방법을 보여줍니다.

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

"white-space" 속성을 "pre" 또는 "pre-wrap"으로 지정하면 줄 바꿈이 적용되고 그에 따라 표시됩니다.

그러나 임의의 문자열을 이스케이프 처리할 때는 주의하는 것이 좋습니다. 새 줄 뒤에 오는 문자로 인해 발생하는 예측할 수 없는 결과를 방지하려면 "A" 대신 "0000a"를 사용하는 것이 좋습니다.

다음은 필요한 이스케이프 시퀀스를 사용하여 CSS 스타일에 텍스트를 추가하는 데 사용할 수 있는 JavaScript 함수입니다. :

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\"').replace(/\n/g, '\00000a')} }"`;
}

이 기술을 사용하면 의사 요소의 ::after 또는 ::before 콘텐츠 속성에 여러 줄을 쉽게 통합하여 요소의 시각적 표현을 향상시킬 수 있습니다.

위 내용은 의사 요소 콘텐츠 ::이후 또는 ::이전에 줄 바꿈을 삽입하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!