最近在制作修改css样式时，发现用 a 标签做::before时浏览器上面不显示。经查原因后发现原来是没有加 content和display两个属性。

一个a::before的写法

<sytle>
//这是个a前面的蓝色小圆点
.nav a::before{
    background: #48A7D9;
    content: ""; //这个属性很重要，是before元素中的内容
    border-radius: 50%;
    display: inline-block;//这个属性很重要，如果没有这个属性，before元素将不显示
    width:8px;
    height: 8px;
    position: relative;
    top: -1px;
    margin-right: 8px;
}
</style>

css3常见伪元素

::first-letter 首个字母
::first-line 第一行
::before 元素头部
::after 元素尾部
::selection 内容选择时

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。