语法说明

• 双冒号::语法（CSS3规范）

• 单冒号:语法仍被支持用于向后兼容

• 必须配合content属性使用（::before/::after）

• 常用用途

  • 添加装饰性内容

  • 清除浮动

  • 自定义列表标记

  • 文本特效

  • 表单样式美化

::before

在元素内容前插入生成内容

p::before {
    content: "→ ";
    color: red;
}

::after

在元素内容后插入生成内容

p::after {
    content: " ★";
    color: gold;
}

::first-line

选择元素的第一行文本

p::first-line {
    font-weight: bold;
    color: blue;
}

::first-letter

选择元素的第一个字母

p::first-letter {
    font-size: 2em;
    float: left;
}

::selection

选择用户选中的文本部分

::selection {
    background: yellow;
    color: black;
}

::placeholder

选择表单元素的占位符文本

input::placeholder {
    color: #999;
    font-style: italic;
}