伪元素

::before/:before

:before在被选元素前插入内容。需要使用content属性来指定要插入的内容。被插入的内容实际上不在文档树中。

HTML:

World

CSS:

h1:before {
    content: "Hello ";
}

::after/:after

:after在被元素后插入内容，其用法和特性与:before相似。

::first-letter/:first-letter

:first-letter匹配元素中文本的首字母。被修饰的首字母不在文档树中。

CSS:

h1:first-letter  {
    font-size: 5em;
}

::first-line/:first-line

:first-line匹配元素中第一行的文本。这个伪元素只能用在块元素中，不能用在内联元素中。

CSS:

p:first-line {
    background: orange;
}

::selection

::selection匹配用户被用户选中或者处于高亮状态的部分。在火狐浏览器使用时需要添加-moz前缀。该伪元素只支持双冒号的形式。

CSS:

::-moz-selection {
    color: orange;
    background: #333;
}
 
::selection  {
    color: orange;
    background: #333;
}

::placeholder

::placeholder匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效。

该伪元素不是CSS的标准，它的实现可能在将来会有所改变，所以要决定使用时必须谨慎。

在一些浏览器中（IE10和Firefox18及其以下版本）会使用单冒号的形式。

HTML:

CSS:

input::-moz-placeholder {
    color:#666;
}
 
input::-webkit-input-placeholder {
    color:#666;
}
 
/* IE 10 only */
input:-ms-input-placeholder {
    color:#666;
}
 
/* Firefox 18 and below */
input:-moz-input-placeholder {
    color:#666;
}

应用实例

背景平行四边形，内容不倾斜

利用两层html标签实现，内容层的倾斜方向与外层的倾斜方向相反，倾斜度相同。用相互抵消的方式来实现

 
    
Click me
 
 
.button { transform: skewX(-45deg); } 
.button > div { transform: skewX(45deg); }

利用伪元素来实现，减少html节点

.button { 
    position: relative; /* text color, paddings, etc. */ 
} 
.button::before { 
   content: ''; /* To generate the box */ 
   position: absolute; 
   top: 0; 
   right: 0; 
   bottom: 0;
   left: 0; 
   z-index: -1; 
   background: #58a; 
   transform: skew(45deg);
}