- ::before
- ::after
- ::first-letter
- ::first-line
CSS3要求对伪元素使用两个冒号以便与伪类进行区别。但注意IE8及更低版本的IE无法识别两个冒号的语法。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /* * :before IE6IE7不支持 * :after IE6IE7不支持 */ .box { font-size: 18px; } .box:before { content: "【"; color: #f00; font-size: 12px; } .box:after { content: "】"; color: #0f0; font-size: 12px; } .box2:before { content: normal; } .box2:after { content: ""; } .box3:before { content: url(http://pic.29293.com/pic/4876786148061704833.jpg); margin-right: 20px; } .box4:after { content: attr(id); position: absolute; left: 100px; } h1, h2, h3, h4 { counter-increment: mycounter; } h1:before { content :"第"counter(mycounter)"章 "; } h2:before { content: counter(mycounter); } h3:before { content: "第"counter(mycounter,circle)"章 "; } h4:before { content: "第"counter(mycounter,upper-roman)"章 "; } h5 { quotes: "(" ")"; } h5:before { content: open-quote; } h5:after { content: close-quote; } dt { counter-increment: btitle; counter-reset: stitle; } dd { counter-increment: stitle; } dt:before { content: counter(btitle)"."; } dd:before { content: counter(btitle)"."counter(stitle)"."; } </style> </head> <body> <div class="box box1"><span>插入内容</span></div> <div class="box box2">插入内容</div> <div class="box box3">插入内容</div> <div class="box box4" id="text">插入内容</div> <h1>大标题</h1> <h1>大标题</h1> <h2>大标题</h2> <h2>大标题</h2> <h3>大标题</h3> <h3>大标题</h3> <h4>大标题</h4> <h4>大标题</h4> <h5>大标题</h5> <dl> <dt>大标题</dt> <dd>小标题</dd> <dd>小标题</dd> <dt>大标题</dt> <dd>小标题</dd> <dd>小标题</dd> <dt>大标题</dt> <dd>小标题</dd> <dd>小标题</dd> <dt>大标题</dt> <dd>小标题</dd> <dd>小标题</dd> </dl> </body> </html>