>  기사  >  웹 프론트엔드  >  CSS3에서 after의 content 속성에 무엇을 넣을 수 있나요?

CSS3에서 after의 content 속성에 무엇을 넣을 수 있나요?

WBOY
WBOY원래의
2022-06-07 17:07:023026검색

css3의 ":after" 의사 요소의 콘텐츠 속성: 1. null 값인 none으로 설정합니다. 2. null 값인 none으로 간주되는 일반으로 설정합니다. 카운터이며 생성된 콘텐츠는 의사 클래스입니다. 요소의 지정된 이름의 최소 범위 수입니다. 4. 문자열 텍스트 콘텐츠로 설정합니다. 5. 따옴표 앞에 "open-quote"를 설정합니다. 따옴표 뒤에 "따옴표 닫기" 등을 사용합니다.

CSS3에서 after의 content 속성에 무엇을 넣을 수 있나요?

이 튜토리얼의 운영 환경: 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>

출력 결과:

CSS3에서 after의 content 속성에 무엇을 넣을 수 있나요?

예시는 다음과 같습니다.

<!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>

출력 결과:

CSS3에서 after의 content 속성에 무엇을 넣을 수 있나요?

(학습 영상 공유: css 영상 튜토리얼)

위 내용은 CSS3에서 after의 content 속성에 무엇을 넣을 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.