CSS3에서 페이지에 콘텐츠를 삽입하는 방법

A. 선택기를 사용하여 콘텐츠 삽입

h2:before{
　　content:"前缀";
}
h2:after{
　　content:"后缀";
}

B． 삽입하지 않을 개별 요소를 지정하세요

h2.sample:before{
　　content:none;
}

2. 이미지 삽입

A． 제목 앞에 이미지 파일을 삽입하세요

h2:before{
　　content:url(anwy.jpg);
}

B． 이미지 제목으로 alt 속성 값을 표시합니다. (사용되지 않음)

img:after{
　　content:attr(alt);
　　display:block;
　　text-align:center;
　　margin-top:5px;
　　font-size:11px;
　　font-weight:bold;
　　color:black;
}

3 번호 삽입

A． 여러 제목 앞에 연속 번호 추가

p:before{
　　content:counter(pCounter);
}
p{
　　counter-increment:pCounter;
}

B． 글머리 기호에 텍스트 추가

p:before{
　　content:"第"counter(pCounter)"段";
}

C. 숫자 스타일과 유형을 지정하세요

p:before{
　　content:counter(pCounter,upper-alpha)'.';
　　color:blue;
　　font-size:16px;
}

D. 번호 중첩

p:before{
　　content:counter(pCounter,upper-alpha)'.';
　　color:blue;
　　font-size:16px;
}
p{
　　counter-increment:pCounter;
　　counter-reset:subDivCounter;
}
p:before{
　　content:counter(subDivCounter)'.';
　　margin-left:15px;
 
　　font-size:12px;
}
p{
　　counter-increment:subDivCounter;
}

E. 문자열 양쪽에 텍스트 중첩 기호 추가

h3:before{
　　content: open-quote;
}
h3:after{
　　content: close-quote;
}
h3{
　　quotes:"【""】";
}

disc dot| squaresquare | 십진수number | roman 소문자 roman | lower-alpha소문자English Letters | none无 |

위 내용은 CSS3에서 페이지에 콘텐츠를 삽입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!