伪类与伪元素

介绍

伪类和伪元素是css中很常见的两个概念，利用的好，能够很方便的实现一些特殊效果。伪类与伪元素由于用法相近，导致平时使用并不能很好的区分这两个概念。
伪类（pseudo-classes）： 伪类类似于class，用于对已有元素增加特殊状态，比如:hover, :active, :lang, :first-child等。
伪元素（pseudo-elements）：伪元素类似于element，用于在DOM中增加一个特殊的element节点，比如:after, :before, :first-line等。

使用

伪类

伪类包括:hover, :active, :link, :focus, :visited, :lang, :first-child。其中每一个的作用如下图：

因为伪类在项目中经常使用，这里不做demo 。

伪元素

伪元素包括:first-line, :first-letter, :before, :after。具体作用见下图

:first-line对元素第一行设置特殊样式。相当于将元素第一行看作是一个独立的元素进行设置样式。
:first-letter对元素第一个字进行设置样式。相当于将元素第一个字当作一个独立的元素进行样式设置。

p:first-letter {
  font-size: 28px;
}
p:first-line {
  color: red;
}

效果如图：

:before在元素前添加一个元素。
:after在元素后添加一个元素。
有一些效果会有一个小尖头，可以很方便的用:before,:after来实现。

.box:before {
  content: 'before';
  font-size: 12px;
  display: inline-block;
  width: 21px;
  height: 21px;
  border: 1px solid red;
  border-right: 0;
  border-top: 0;
  transform: rotate(45deg);
  position: relative;
  top: 2px;
  left: -20px;
}
.box:after {
  content: 'after';
  font-size: 12px;
  display: inline-block;
  width: 21px;
  height: 21px;
  border: 1px solid red;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg);
  position: relative;
  top: 3px;
  left: 20px;
}