CSS3的4大伪元素选择器详解

　　在CSS3开发中，常见的伪元素选择器主要有4种，下面就和大家一起来扒一扒。

first-line伪元素选择器

　　我们在这个后面接着来写，我们写一个段落

<p>

        在CSS中，主要有四个伪元素选择器<br/>

        first-line伪元素选择器用于向某个元素中的第一行文字使用样式。

    </p>

　　我们所说的这个first-line，这个选择器是需要向某个元素中的第一行文字使用样式。因为这个br它是换行，也就是说我们使用first-line的话它会，对我们第一行文字进行一个样式，我们来看一下对不对

p:first-line{

color: #f60;

}

　　第一行我们给它一个橙色

　　第一行元素p的第一行文字，给它一个橙色，这就是我first-line的使用方法。

first-letter伪元素选择器

　　就拿我们这里的来测试，我们这样来

p:first-letter{

color: green;

font-size: 24px;

}

　　第一个文字我们给它一个绿色，然后呢给它加一个字体，我们看一下。

　　每一个元素中的第一个字我们都设为了绿色，这个字呢还很大很大。

after伪元素选择器

　　我们在这里新建一个ul在这个ul里面呢有这个很多的链接。

<li><a href="index1.html">伪类选择器</a></li>

    <li><a href="index1.html">伪类选择器</a></li>

    <li><a href="index1.html">伪类选择器</a></li>

    <li><a href="index1.html">伪类选择器</a></li>

    <li><a href="index1.html">伪类选择器</a></li>

    <li><a href="index1.html">伪类选择器</a></li>

    <li><a href="index1.html">伪类选择器</a></li>

　　我们在这个链接之前给它加入一个符号，我们看一下怎样来实现。那么在加入之前我们先来看一下是什么样的一个样式。

　　设这样的一个样式，那么我们来给它这样来，它默认的这个例的话是有有一个前面有这个圆点。那么我们把它给去掉。那么怎样去掉，在这里。

li{

list-style: none;

}

　　这个方法来将它去掉。

　　这样就将默认的圆点给去掉了，然后我们在这个例之前呢给它加一个圆点，通过这个元素之前的方法给它一个追加，追加之前呢它一个小圆点。

li:before{

content:"...";

color: red;

}

　　我们来测试一下。在前面就有这个小点点了，那么我们加一个小圆点？

　　它就有很多个小圆点，这就是在前面追加的方式。我们来看在后面追加的方式。

li:after{

content: "__after追加";

color: #ff6600;

}

before伪元素选择器

在每个 <p> 元素的内容之前插入新内容：

    p:before

    {

    content:"内容：";

    }

     :before 选择器在被选元素的内容前面插入内容。

     请使用 content 属性来指定要插入的内容。

原文链接：http://www.maiziedu.com/wiki/css3/css/