最近接触到的css 伪元素觉得还算不错 分享下：

1、清楚内盒浮动设置：

.back_list ul{padding:12px 0 0 12px;zoom:;}

.back_list ul:after{clear: both;content: ".";display: block;height:;visibility: hidden;}/*清楚内盒浮动设置*/

2、伪元素after设置，在元素之后添加内容：

.afterxx{width:400px;height:200px; background-color:#999;border-radius:10px;margin:50px;position:relative;}

.afterxx:after{color:#999;font-size:94px;content:"◀";position:absolute;left:-23px;top:16%;}

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbcAAADmCAIAAADZUFxaAAAEjElEQVR4nO3cQU4qaRiF4bv/HUBIhVEhLIGITMSZJoaZVoGugWlJ3Vl30rl9sBX4hX6eFXC+wZtUVcKvHoB/96v0DwD40VQSIFFJgEQlARKVBEhUEiBRSYBEJQESlQRIVBIgUUmARCUBEpUESFQSIDlJJbuue3l5mc/nk8lkPB4PAM5oPB5PJpP5fP76+tp13TeDdvxKtm1b13XpKwEMBoNBXdebzeY7TTtmJff7/Wq1Kn0TgH96eHjY7/flK3l/f1/6FAB/tlqtCldyu92WPgJA8vb2VqySXdd5Fwn8cHVdf+FjznEq2TRN6fkAh7VtW6aSt7e3pbcDHLZYLMpUcjKZlN4OcNh0Oi1TyaqqSm8HOKyqqjKVLD0c4LNUEiBRSYBEJQESlQRIVBIgUUmARCUBEpUESFQSIFFJgEQlARKVBEhUEiBRSYBEJQESlQRIVBIgUUmARCUBEpUESFQSIFFJgEQlARKVBEhUEiBRSYBEJQESlQRIVBIgUUmARCUBEpUESFQSIFFJgEQlARKVBEhUEiBRSYBEJQESlQRIVBIgUUmARCUBEpUESFQSIFFJgEQlARKVBEhUEiBRSYBEJQESlQRIVBIgUUmARCUBEpUESFQSIFFJgEQlARKVBEhUEiBRSYBEJQESlQRIVBIgUUmARCUBEpUESFQSIFFJgEQlARKVBEhUEiBRSYBEJQESlQRIVBIgUUmARCUBEpUESFQSIFFJgKRAJXe7XenVAJ911krudrvn5+fSkwH+gzNVUh+BC3XySuojcNFOWEl9BK7ASSqpj8DVOHIl9RG4MioJkBy5kloJXJmTVFIrgatxwkpqJXAFTl5JrQQu2pkqqZXAhTprJf9qZenVAJ9VoJK9f04DLodKAiQqCZCoJECikgCJSgIkKgmQqCRAopIAiUoCJCoJkKgkQKKSAIlKAiQqCZCoJECikgCJSgIkKgmQqCRAopIAiUoCJCoJkKgkQKKSAIlKAiQqCZCoJECikgCJSgIkKgmQqCRAopIAiUoCJCoJkKgkQKKSAIlKAiQqCZCoJECikgCJSgIkKgmQqCRAopIAiUoCJCoJkKgkQKKSAIlKAiQqCZCoJECikgCJSgIkKgmQqCRAopIAiUoCJCoJkKgkQKKSAIlKAiQqCZCoJECikgCJSgIkKgmQqCRAopIAiUoCJCoJkKgkQKKSAIlKAiQqCZCoJECikgCJSgIkKgmQqCRAopIAiUoCJCoJkJSpZFVVpYcDHFZVVZlK3tzclN4OcNh0Oi1TycViUXo7wGF3d3dlKtk0TentAIe1bVumkh8fHx66gR9uNpvt9/sylez7frvdlr4AQPL+/v6FuB2tkn3fPz4+lj4CwJ89PT19rWzHrGTf9+v1ejgclr4GwN+Gw+F6vf5y1o5cyb7v27at67r0WQAGg8GgruvNZvOdph2/kn3fd13XNM1yuZzNZqPRqPSVgP+X0Wg0m82Wy2XTNF3XfTNoJ6kkwNVQSYBEJQESlQRIVBIgUUmARCUBEpUESFQSIFFJgEQlARKVBEhUEiBRSYBEJQGS37IiT3fOs4JOAAAAAElFTkSuQmCC" alt="" />

3、伪元素before设置，在元素之前添加内容：

.beforexx{width:300px;height:100px;}

.beforexx:before{content:url(back_listimg.jpg);}

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAATkAAAAiCAIAAACr5TlKAAAGlklEQVR4nO1YXW8UZRTee2/4Af4AYoiJimKIxOBHjBU0agzdbqFQNnxsmxS4sAjWUoxW0kgKCTcYI0YhJFyKF3jhVwNISgJp0hYSaUvbdHdnd2dnZj/me48X1bLszJz3zOxOZeB9LprO+573Pc95znlmko0BBwdHFBD7vwlwcHCQwL3KwRENcK9ycEQD3KscHNEA9yoHRzTAvcrBEQ2QvKqbUAEbDP2vG+Pnv/vh2s0/wdTAqEFNMcH84/rYufNXfr0xBmACGKYVNmcOjicRxO9qUf74k/vx+OUXXr41+8uPG9aX3mmvvLd9vv2j3Lvxy+tf/Pv275eeXTezLaENDEJNCZcyB8cTCZpXDWPp/SQMHpt47vWffv524vk2bfjz2qdHqkNHYOjE2ObNv10+N/XqG9ZnQ/faOqBmPpQgFkMeOXCsglx+U/iKD+9y10iv48j6Mry2iGQouVoQTAmyavq9tz5MD+y9tn7DV2uevr12c+FQD/Tsgf0pSPVefWbtl0+tub5urTU8cOe1rWCrDWzqCeHkYizQC3s8QCyZLhpTYabOoXrbV7xXdcidvsYp2MiFWC8pSofJjVugZx/cujJ/8ULx0sX81YvVvbvt7n25/fvFZPdSW5eyo8Pck5rZtLUMD76rK9XSJ4n++FiC6KUWStHa2WoJ/xjt5U4fD9ctSuEt92oz+tCo1EpjL71id3VOvr1lqW3n/W3JqTfb4IPOcnsinegsxOPitpS2PVHu7r65cROYRYQ3vUnMRzqaGe4w7EFPHdK1vqbE12AF+J9+PzF45QjCE8jyMsPo/APo81AiCt2SCme+OWWApIOpA0C1WgFDBbsARQk0AK1mAOgFG5QLZ0ZK//0OjEjmqp2TZTBxXRHsLEXB8LA6GSmziMfH6rxUv7jS/YaV1tLzdQl9FOvjfTEMTx+aECZ8f3IUKiWogm4A6BbolmIB2BoYAPkqGJABzaxVzn79BaiNienvD0TKYJ1GcoV3qiUgvqeYitVLRw9G2uTaNVdWzl2/TXQNxkfC6whx0TUGj1w1fYjCmaMDgybYFaNqq6qsVgzDMDTd0HTDMGS1YqtqxaiaYI8ODAKYDRV6NZ5ZFVMFz6ocNfsakSZPNY9g/HFtmUeIMUxuThqukxCYm2uZeApXGuF5NSR9SNoZYJ09OSrZVcnSDMvMGuWirkm6JulaUdeyRtmwTMnSJLt69uSoAVZDYsrLm1kVs5KGSNezXkmdfBCqzsX6R0o8hb8rB/we5xBQsjDjXcMoZ/3y8Trr3HJtAXKwoTv1kYikj5o+JAVrAKeHhnOVckaRxaIs2GamXE7LSlpWMuWyYJtiUc4ocq5SPj00XCPzdvJrWMEffcG1rwEyIgGU0SFaiJnX6yAxnmh+/FqmPVyTIomQs0w+CBlK6ykl+LVcy/WhTb8Fp/qPl1RNEOVCRlyQ5UVRSheVdFFZFKUFWS5kREGUS6p2qv841P22ROTdQBcBia3Hza6PeAq/XqVUROEZtle9YvCp8op3aoJkZ+pAlMiLW8NuA0O6V+ktWDV9aNNvw0j/sawiz2aFgqhMC5k5sTiTL8zkC3NicVrIFERlNitkFXmk/xjY7rXRJ5X46AuIV+mncEr4oPsiGcCrdK1cXoHo28Tr9eHcqj+O3IwMPUUu/E68C/WnVv4iVdMXV0Mf19UGaACH+w5lTPVOLn13YX6ikJnKZyez6clseiqfnShk7i7M38mlM6Z6uO+Q5l1YkwNHaaTfm/E7mSXUP9K7y0TLpWvmINNCxMKRS4gudd4TwKv4PRSqzpWw9fk3AN9exuzi3NHevqVSPldVBEEQ9HJWkQVJEiQpq8iCXhYEIVdVlkr5o719s4tzrrnx1xiFva92Os8yG0bJ2KRXiSX4bWQA6YhTzkztFUAvAfkuMdOF4VWm1A3TFbY+DwLw7WVMj4+fSB1IJZO7OxIHd3R3xRO9O5M9nbt6Onf17kx2xRMHd3Tv7kikkskTqQPT4+PO3K7OYdbcWq+6riNkXNdd45Fgr/uZ/J3XemWhjALy6PcqYgBlFr1kpKSr/0snw9ST0iNcW2a81yL7HiazwKgfOCTA+b9z0asxjyv8utpry3UWcVV9zRDSF/z9gl+On/XyFVIO04rNDFio+jx0JAC5liOwmTmaRIDPCHE3wHejedBfB2EnZe4+Wt9VDg6OFoJ7lYMjGuBe5eCIBrhXOTiiAe5VDo5ogHuVgyMa4F7l4IgGuFc5OKIB7lUOjmjgH7HdqE1zZwA/AAAAAElFTkSuQmCC" alt="" />

注：IE8版本以下不支持标注2和3的属性

css 伪元素分享！！！的更多相关文章

  1. jQuery如何改变css伪元素样式

    首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...

  2. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  3. (六)CSS伪元素

    CSS伪元素用于向某些选择器设置特殊效果. 伪元素的用法和伪类相似: selector:pseudo-element {property:value;} CSS类也可以与伪元素配合使用: select ...

  4. CSS 伪元素

    CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.c ...

  5. css伪元素

    CSS 伪元素用于向某些选择器设置特殊效果. 1.:first-line 伪元素  "first-line" 伪元素用于向文本的首行设置特殊样式.注意:"first-li ...

  6. js如何控制css伪元素内容（before，after）

    曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗 ...

  7. css伪元素用法大全

    本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...

  8. js分析 汽_车_之_家 js生成css伪元素 hs_kw44_configUS::before

    0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...

  9. CSS伪元素before、after妙用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Android4.0 添加一个新的Android 键值

    这里添加新的键值,不是毫无凭据凭空创造的一个键值,而是根据kernel中检测到的按键值,然后转化为Android所需要的数值: 以添加一个Linux键值为217,把它映射为android的键值Brow ...

  2. Android 逐帧动画

    原理: 逐帧动画是最简单的一种动画.原理就是把几张图片连续显示出来,以达到动画的效果.就相当于下面这种手绘翻页动画啦~ 实现: 1.需要建立一个animation-list来设置静态图片资源.持续时间 ...

  3. 【转】Eclipse快捷键 10个最有用的快捷键

    转载地址:http://www.open-open.com/bbs/view/1320934157953 Eclipse中10个最有用的快捷键组合  一个Eclipse骨灰级开发者总结了他认为最有用但 ...

  4. activiti 中文文档

    http://www.mossle.com http://www.mossle.com/docs/activiti/index.html

  5. Python爬网获取全国各地律师电话号

    [本文出自天外归云的博客园] 从64365网站获取全国各地律师电话号,用到了python的lxml库进行对html页面内容的解析,对于xpath的获取和正确性校验,需要在火狐浏览器安装firebug和 ...

  6. 统计图表类型选择应用总结&表数据挖掘方法及应用

    数据挖掘方法及应用: 图表注意事项 • 信息完整:图表标题.单位.图例.脚注.来源等 • 避免无意义的图表 • 一表反映一个观点 • 只选对的不选复杂的图表 • 标题一句话阐述清楚反映观点 确定对比关 ...

  7. Navicat for mysql 远程连接 mySql数据库10061、1045错误

    原文地址:http://www.111cn.net/database/mysql/46377.htm 有朋友可能会碰到使用Navicat for mysql 远程连接 mySql数据库会提示10061 ...

  8. 115个Java面试题和答案——终极列表（上）

    本文我们将要讨论Java面试中的各种不同类型的面试题,它们可以让雇主测试应聘者的Java和通用的面向对象编程的能力.下面的章节分为上下两篇,第一篇将要讨论面向对象编程和它的特点,关于Java和它的功能 ...

  9. 对teacher表进行增加，删除，修改

    <%@page import="java.text.SimpleDateFormat"%> <%@ page language="java" ...

  10. adnroid 监听软键盘的显隐

    首先注明出处,我只是想做个笔记:http://www.jb51.net/article/64820.htm 第一眼看到的时候,觉得不太可靠,因为之前都是看到这样处理的,根据监听一个根布局的size,可 ...