before与after的一些应用总结

一、伪元素介绍

css3为了区分伪类和伪元素，伪元素采用双冒号写法（单冒号也是可以使用的）

　　常见伪类——:hover,:link,:active,:target,:not(),:focus（文本输入框聚焦）。

　　常见伪元素——::first-letter,::first-line,::before,::after,::selection。

:before和:after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。这些添加操作不会出现在DOM中，也不会改变文档内容，不可复制，仅仅是在css渲染的时候加入。

所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容。例如添加icon,图片，链接，背景遮罩等；

这是添加一个背景色的效果


  <style>
        div{
            width:100px;
            height:60px;
            line-height:60px;
            text-align:center;
            border:1px solid #F00;
            position:relative;
        }
        div  span
        div:before{
            content:'';
            width:100px;
            height:60px;
            background:#F0F;
            opacity:0.5;
            position:absolute;
            top:0;
            left:0;    
            display:none;
            
        }
        div:hover:before{
            display:block;
        }
    </style>
</head>
<body>
    <div>
        <span>首页</span>
    </div>
</body>

二、content属性

:before和:after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。

content可取以下值。

1、string

使用引号包一段字符串，将会向元素内容中添加字符串。如：p:after{content:"@@"}

2、attr()

通过attr()调用当前元素的属性，比如将图片alt提示文字或者链接的href地址显示出来。

3、counter()

调用计数器，可以不使用列表元素实现序号功能。

4、attr()

通过attr()调用当前元素的属性，比如将图片alt提示文字或者链接的href地址显示出来。

清除浮动
.clearfix:after{ content:""; display:block;clear:both;}