CSS3에서 after의 content 속성에 무엇을 넣을 수 있나요?
- WBOY원래의
- 2022-06-07 17:07:023003검색
css3의 ":after" 의사 요소의 콘텐츠 속성: 1. null 값인 none으로 설정합니다. 2. null 값인 none으로 간주되는 일반으로 설정합니다. 카운터이며 생성된 콘텐츠는 의사 클래스입니다. 요소의 지정된 이름의 최소 범위 수입니다. 4. 문자열 텍스트 콘텐츠로 설정합니다. 5. 따옴표 앞에 "open-quote"를 설정합니다. 따옴표 뒤에 "따옴표 닫기" 등을 사용합니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css3에서 after의 콘텐츠 속성
content 속성은 콘텐츠를 삽입하기 위해 :before 및 :after 의사 요소와 함께 사용됩니다.
구문 형식:
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;
가능한 값:
none 콘텐츠를 null 값으로 설정합니다.
normal은 :before 및 :after 의사 클래스 요소에서 없음으로 처리됩니다. 즉, 빈 값이기도 합니다.
counter 는 카운터를 설정하며 형식은 counter(name) 또는 counter(name,style) 일 수 있습니다. 생성된 콘텐츠는 의사 클래스 요소의 지정된 이름의 가장 작은 범위의 개수입니다. 형식은 스타일로 지정됩니다(기본값은 '십진수' - 십진수)
attr(attribute) 의 속성 속성을 반환합니다. 문자열로서의 요소. .
string 텍스트 내용 설정
open-quote 앞 따옴표 설정
close-quote 뒷따옴표 설정
no-open-quote 내용의 여는 따옴표 제거
no-close - quote 콘텐츠에서 닫는 따옴표 제거
url(url) 특정 미디어(이미지, 사운드, 비디오 등)의 링크 주소 설정
예제는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
p:before {
content:"天王盖地虎- ";
}
p#testID:before {
content:none;
}
</style>
</head>
<body>
<p>宝塔镇河妖</p>
<p id="testID">强的很！！！</p>
</body>
</html>출력 결과:
예시는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p::before {
content: open-quote;
}
p::after {
content: close-quote;
}
</style>
</head>
<body>
<p>天王盖地虎-宝塔镇河妖</p>
</body>
</html>출력 결과:
(학습 영상 공유: css 영상 튜토리얼)
위 내용은 CSS3에서 after의 content 속성에 무엇을 넣을 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!