伪元素:before,:after

伪元素能做什么？

伪元素”，顾名思义。它创建了一个虚假的元素，并插入到目标元素内容之前或之后。

单词“pseudo”是希腊语的英译，它的基本意思是“说谎的，不诚实的，错误的。”因此叫伪元素是适合的。因为在文档中它不实际改变什么。相反的，它们是像幽灵一般的元素插入在css中，他们对用户是可见的，可以通过css控制。

基本语法

:before和:after伪元素编码非常简单。例子：

 .example: before{
 content: "#";
 }
 .example:after{
 content: "。";
 

这个例子中提到了两件事情，第一，我们用.example:before和.example:after来目标锁定相同的元素.严格的说，在代码中他们是伪元素。
第二，伪元素如果没有设置“content”属性，伪元素是无用的。
语法笔记

你可以设置content属性值为空，并且仅仅把他当作一个内容很少的盒子。像这样：

 .example :before{
 content: "";
 display:block;//默认是inline
 width:100px;
 height:100px;
 background-color:yellow
 }

然而，你不可以完全的移除content属性，如果你移除了，伪元素将不会起作用。至少，content属性需要空引用作为它的值(即:content:“”)。
插入内容的特点
插入的内容在页面的源码里是不可见的。只能在css里可见
同时，插入的元素在默认情况下是内联元素

之前和之后是什么？
你的直觉是：before和：after伪元素可能是 插入的内容会被注入到目标元素的前或后注入。但是，正如上面提到的，不是这样的
注入的内容将是有关联的目标元素的子元素，但它会被置于这个元素的任何内容的“前”或“后”。
插入非文本内容
我简要的提醒，你可以把属性的值置为空字符串或是插入文本内容。你基本上有属性的值要包含什么的两个额外的选择
首先，你可以包含一个指向一个图像的URL，就像在css里包含一个背景图像一样做你能做的

 
 
 p:before { 
 
 content: url(image.jpg); 
 
 } 
 
 

注意不能使用引号。如果你将URL用引号括起来，那么它会变成一个字符串和插入文本“url(image.jpg)”作为其内容，插入的而不是图像本身。
一些提醒
伪元素不会出现在DOM中。这些元素不是真正的元素。因此，它们 不是可用的。所以，不要使用伪元素生成内容，是您的网页的可用性和可访问性的关键。

文档参考自w3cplus.com