<p>使用场景一：插入内容</p><p>假设我们有如下的HTML代码</p><p><p>paragraph text</p></p><p>我们可以用伪元素添加内容比如：</p><p>p:before {</p><p> content: "this is ";</p><p> font-weight: bold;</p><p> font-style: italic;</p><p>}</p><p>在浏览器中呈现的效果：</p><p></p><p>请记住，实际上这种做法是在内容之前或之后添加元素。它不是出现在所选元素旁边的东西，而是与其内容有关。</p><p>场景二：插入Icons图标</p><p>通过伪元素:before and :after 插入图标是非常流行的做法。因为我们可以给伪元素添加几乎任何CSS样式属性（常见的情况是：创建的伪元素是一个块并附加背景图像）</p><p>比如我们给出一段HTML代码</p><p><p>paragraph text</p></p><p>通过伪元素方式添加icon图标</p><p>p:before {</p><p> content: "";</p><p> display: block;</p><p> background: url("icon.jpg") no-repeat;</p><p> width: 20px;</p><p> height: 20px;</p><p> float: left;</p><p> margin: 0 6px 0 0;</p><p>}</p><p>在浏览器中呈现的结果如下：</p><p></p><p>使用场景三：给链接添加额外的样式</p><p>有时候，将不同风格的链接指向外部资源是一种很好的做法。通过伪元素的方式，可以很容易地实现它。假设我们有以下几段文字：</p><p><p>Krasimir Tsonev is <a href=">developer</a></p><p>who likes to write and <a href=">tweet</a>.</p></p><p>我们可以在该链接之后添加一个小图标，指示它指向当前域外部的页面。</p><p>a {</p><p> text-decoration: none;</p><p> font-weight: bold;</p><p> color: #000;</p><p>}</p><p>a:after {</p><p> content: "";</p><p> display: inline-block;</p><p> background: url("icon-external.jpg") no-repeat top right;</p><p> width: 14px;</p><p> height: 12px;</p><p>}</p><p>在浏览器中呈现的结果：</p><p></p><br><p>使用伪元素:before and :after 最大的好处是可以在不添加新的DOM节点的情况下对HTML进行样式设置。 CSS是前端控制视觉的工具，结合伪元素，可以轻松完成很多精巧的设计，好看的样式。</p><p><br></p>
学习了
通过伪元素的方式，可以很容易地实现它
就是相当于在你写的那个元素后面使用这个样式
学习了
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>,希望能够帮到你！
百度一下
