css伪类 :after的是什么意思？:after怎么用？

使用场景一：插入内容

假设我们有如下的HTML代码

<p>paragraph text</p>

我们可以用伪元素添加内容比如：

p:before {

    content: "this is ";

    font-weight: bold;

    font-style: italic;

}

在浏览器中呈现的效果：

请记住，实际上这种做法是在内容之前或之后添加元素。它不是出现在所选元素旁边的东西，而是与其内容有关。

场景二：插入Icons图标

通过伪元素:before and :after 插入图标是非常流行的做法。因为我们可以给伪元素添加几乎任何CSS样式属性（常见的情况是：创建的伪元素是一个块并附加背景图像）

比如我们给出一段HTML代码

<p>paragraph text</p>

通过伪元素方式添加icon图标

p:before {

    content: "";

    display: block;

    background: url("icon.jpg") no-repeat;

    width: 20px;

    height: 20px;

    float: left;

    margin: 0 6px 0 0;

}

在浏览器中呈现的结果如下：

使用场景三：给链接添加额外的样式

有时候，将不同风格的链接指向外部资源是一种很好的做法。通过伪元素的方式，可以很容易地实现它。假设我们有以下几段文字：

<p>Krasimir Tsonev is <a href="">developer</a>

who likes to write and <a href="">tweet</a>.</p>

我们可以在该链接之后添加一个小图标，指示它指向当前域外部的页面。

a {

    text-decoration: none;

    font-weight: bold;

    color: #000;

}

a:after {

    content: "";

    display: inline-block;

    background: url("icon-external.jpg") no-repeat top right;

    width: 14px;

    height: 12px;

}

在浏览器中呈现的结果：

使用伪元素:before and :after 最大的好处是可以在不添加新的DOM节点的情况下对HTML进行样式设置。 CSS是前端控制视觉的工具，结合伪元素，可以轻松完成很多精巧的设计，好看的样式。

学习了

通过伪元素的方式，可以很容易地实现它

就是相当于在你写的那个元素后面使用这个样式

学习了

after顾名思义是在元素后面的意思，实质是在元素之后添加内容。

注意：after伪类ie6、ie7都是不支持的

只有firefox、chrome、safari才支持

其实你可以这样简单理解，CSS 伪类就是用于向某些选择器添加特殊的效果。比如

在每个 <p> 元素后面插入内容，并设置所插入内容的样式：

p:after

{ 

content:"最爱";

background-color:yellow;

color:red;

font-weight:bold;

}

比如原来的标签是<p>我的</p>，加了p:after之后就变成<p>我的最爱</p>,希望能够帮到你！

百度一下