데이터 속성과 개행 문자를 사용하여 CSS 의사 요소 콘텐츠 사용자 정의
CSS 세계에서 데이터 속성은 삽입하는 편리한 방법을 제공합니다. 정보를 스타일 규칙으로 액세스하고 조작할 수 있는 HTML 요소로 변환합니다. 하지만 이러한 데이터 속성 내에 줄 바꿈을 통합해야 하는 경우에는 어떻게 해야 합니까?
질문:
CSS 데이터 속성에 줄 바꿈을 지정하고 이를 의사 요소 콘텐츠에 사용할 수 있습니까?
자세한 설명:
활성화하려면 데이터 속성에 줄 바꿈이 있으면 속성 값 자체를 수정해야 합니다. 방법은 다음과 같습니다.
의사 요소 스타일 조정: 줄 바꿈을 유지하려면 의사 요소에 다음 속성을 추가하세요.
예 코드:
[data-foo]:after { content: attr(data-foo); background-color: black; color: white; white-space: pre; display: inline-block; }
<div data-foo='First line 
 Second Line'>foo</div>
이러한 수정을 통해 의사 요소는 줄 바꿈이 유지된 데이터 속성 콘텐츠를 표시하므로 사용자 정의 데이터 속성을 기반으로 여러 줄 디스플레이를 만들 수 있습니다.
위 내용은 의사 요소 콘텐츠의 CSS 데이터 속성에 줄바꿈을 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!