CSS伪元素

CSS 伪元素用于向某些选择器设置特殊效果。

• 结构：selector:pseudo-element {property:value;}

:first-letter 

• "first-letter" 伪元素用于向文本的首字母设置特殊样式：
  

p:first-letter{
    font-size: 40px;
}

尝试一下》

:first-line 伪元素

• "first-line" 伪元素用于向文本的首行设置特殊样式。

p:first-line{
    color: red;
}

尝试一下》

 :before 伪元素

• ":before" 伪元素可以在元素的内容前面插入新内容。

• 插入的内容为content的值，可以是图片路径或者文字

• 添加的内容可以单独设置样式

• 如下，在p元素前面增加红色文字“总结：”
  

p:before{
    content: "总结:";
    color: red;
}

尝试一下》

下面这个例子，在p前面加一条竖线，涉及到css定位，后面会有更加详细的解释。

p{
    position: relative;
    padding-left: 10px;
}
p:before{
    content: "";
    width: 2px;
    height: 16px;
    background-color: red;
    position: absolute;
    left: 0;
    top:0;
}

尝试一下》

:after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容。

和before类似，可以自行尝试。