Css3 伪元素::before和::after

一、::before / ::after 简介

::before 和 ::after 是 CSS 中的伪类，它们基本功能是在 CSS 渲染中向元素的内容前面和后面插入内容。虽然在实际 HTML 中我们没有增加任何标签，并且会在浏览器中展现出来。

::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。

默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。

二、Content 属性的值

1. string

    <style>
        .phoneNumber::before {
            content: '\260E';
            font-size: 15px;
        }
    </style>
    

    <p class="phoneNumber">12345645654</p>

Css3 伪元素::before和::after

2.attr()

    <style>
        a::after {
            content: attr(href);
            color: red;
        }
    </style>

    <a href="http://www.jnqianle.cn">千乐微云</a> 
    <br>

    <a href="http://www.jnqianle.cn">千乐微云</a> 
    <br>

Css3 伪元素::before和::after

3.url()/uri()

    <style>
        a::before {
            content: url('http://www.jnqianle.cn/img/index/logo.png');
           
        }
    </style>

    <a href="http://www.jnqianle.cn">千乐微云</a> 
    <br>

    <a href="http://www.jnqianle.cn">千乐微云</a> 
    <br>

Css3 伪元素::before和::after

4.counter()

配合counter-increment和counter-reset属性使用：

h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

<style>
 2 body{
 3     counter-reset: section;
 4 }
 5 h1{
 6     counter-reset: subsection;
 7 }
 8 h1:before{
 9     counter-increment:section;
10     content:counter(section) "、";
11 }
12 h2:before{
13     counter-increment:subsection;
14     content: counter(section) "." counter(subsection) "、";
15 }
16 </style>
17 ------------------------------------------------
18 <body>
19 <h1>HTML tutorials</h1>
20 <h2>HTML Tutorial</h2>
21 <h2>XHTML Tutorial</h2>
22 <h2>CSS Tutorial</h2>
23 
24 <h1>Scripting tutorials</h1>
25 <h2>JavaScript</h2>
26 <h2>VBScript</h2>
27 
28 <h1>XML tutorials</h1>
29 <h2>XML</h2>
30 <h2>XSL</h2>
31 
32 </body>

View Code