了解css中伪元素 before和after的用法

层叠样式表（CSS）主要用于将样式应用于HTML标签，可是在某些状况下，向文档添加额外标签元素是多余的或不可能的，CSS中实际上有一个特性容许咱们在不中断实际文档的状况下添加额外标签，即伪元素。 你据说过这个术语，尤为是当你一直在学习咱们的一些教程时。 实际上，有一些CSS族成员被归类为伪元素，例如：:first-line, :first-letter, ::selection, :before 和:after，咱们将把覆盖范围限制为:before和:after，这里的“伪元素”专门指这两个元素。咱们将从基础的角度来研究这个特殊的主题。

语法和浏览器支持

伪元素实际上从css1开始就存在了，可是在css2.1中发布了:befor和:after咱们讨论的内容。在开始时，伪元素使用单冒号做为语法，而后随着Web的发展，在CSS3中，伪元素被修改成使用::before & ::after-以将其与伪类（即：hover、：active等）区分开来。 以下图

然而，当您使用单引号格式或双引号列格式时，浏览器仍然能支持识别它。ie浏览器8只支持单引号格式，若是你想要了解更多浏览器兼容性， 请点击。

它是作什么的？

简而言之，伪元素将在内容元素以前或以后插入一个额外的元素，所以当咱们同时添加这两个元素时，它们在技术上是相等的，标签以下。

<p>
<span>:before</span> 
  This the main content. 
<span>:after</span>
</p>
复制代码

但这些元素实际上不是在文档上生成的。它们在表面上仍然可见，但在文档源中找不到它们，所以实际上它们是假的元素。

使用伪元素

使用伪元素相对容易；如下语法选择器：before将在内容选择器以前添加元素，而此语法选择器：after将在内容选择器以后添加元素，若要在其中添加内容，可使用content属性。

例如，下面的代码片断将在代码块以前和以后添加一个引号。

blockquote:before {
  content: open-quote;
}
blockquote:after {
  content: close-quote;
}
复制代码

设置伪元素的样式

blockquote:before {
  content: open-quote;
  font-size: 24pt;
  text-align: center;
  line-height: 42px;
  color: #fff;
  background: #ddd;
  float: left;
  position: relative;
  top: 30px;
 
}
blockquote:after {
  content: close-quote;
  font-size: 24pt;
  text-align: center;
  line-height: 42px;
  color: #fff;
  background: #ddd;
  float: right;
  position: relative;
  bottom: 40px;
}

复制代码

指定维度

默认状况下，生成的元素是一个内联级别的元素，所以当咱们要指定高度和宽度时，必须首先使用display:block声明将其定义为一个块元素。

blockquote:before {
  content: open-quote;
  font-size: 24pt;
  text-align: center;
  line-height: 42px;
  color: #fff;
  background: #ddd;
  float: left;
  position: relative;
  top: 30px;
  border-radius: 25px;
 
  /** define it as a block element **/
  display: block;
  height: 25px;
  width: 25px;
}
blockquote:after {
  content: close-quote;
  font-size: 24pt;
  text-align: center;
  line-height: 42px;
  color: #fff;
  background: #ddd;
  float: right;
  position: relative;
  bottom: 40px;
  border-radius: 25px;
 
  /** define it as a block element **/
  display: block;
  height: 25px;
  width: 25px;
}

复制代码

附加背景图

咱们还能够用图像替换内容，而不单单是纯文本。虽然content属性提供了一个url（）字符串来插入图像，但在大多数状况下，我更喜欢使用background属性来对附加的图像进行更多的控制。

blockquote:before {
  content: " ";
  font-size: 24pt;
  text-align: center;
  line-height: 42px;
  color: #fff;
  float: left;
  position: relative;
  top: 30px;
  border-radius: 25px;
 
  background: url(images/quotationmark.png) -3px -3px #ddd;
 
  display: block;
  height: 25px;
  width: 25px;
}
blockquote:after {
  content: " ";
  font-size: 24pt;
  text-align: center;
  line-height: 42px;
  color: #fff;
  float: right;
  position: relative;
  bottom: 40px;
  border-radius: 25px;
 
  background: url(images/quotationmark.png) -1px -32px #ddd;
 
  display: block;
  height: 25px;
  width: 25px;
}
复制代码

可是，正如您从上面的代码片断中看到的，咱们仍然在声明Content属性，而此次是用一个空字符串。内容属性是一项要求，应该始终应用；不然伪元素将不起做用。

与伪类组合使用

尽管它们是不一样类型的伪，可是咱们能够在一个css规则中同时使用伪类和伪元素，例如，若是咱们但愿在块引号上方悬停时将引号背景变暗一点。

blockquote:hover:after, blockquote:hover:before {
  background-color: #555;
}
复制代码

添加过渡效果

咱们甚至能够将过渡属性应用于它们，以建立优美的颜色过渡效果。

transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;
复制代码

但不幸的是，过渡效果彷佛只在Internet Explorer 十、Firefox、Opera 和 Chrome 支持 transition 属性。但愿未来有更多的浏览器可以遇上，容许在伪元素中应用转换属性。

原文地址：www.hongkiat.com/blog/pseudo…