伪元素”:after” , “:before"

伪元素就是源码html中不存在，而视觉上又存在的元素

 

---

 

• 简单用法：

blockquote:before {

     content: open-quote;

     // 其他样式

} // 表示在blockquote标签后面添加引号

 

• 注意点

1. 插入的内容使用content属性控制；

                    css3 的content属性可以往页面元素里面填写内容;

                    没有内容时要写     content：“”；否则伪元素不显示

                    p:after {

                              content：“我是插在p标签结尾的内容”；

                    }

                    

                    还可以配合attr动态获取content内容；

                    

/* <div data-line="1"></div> */



div[data-line]:after { 

        content: attr(data-line); /* 属性名称上不要加引号！*/

}                                 /* 在div的后面添加了data-line的值 1 ；*/

      2.伪元素缺省状态为inline内联元素，如果要制定宽高需设置display: block;

      3.插入图片最好用background属性