最近接触到的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,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" 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. UIApplication

    1.UIApplication 是 iPhone 应用程序的开始并且负责初始化并显示 UIWindow,并负责加载应用程序的第一个 UIView 到 UIWindow 窗体中. UIApplicati ...

  2. 【转】不容忽视的ClassNotFoundException

    转载地址:http://it.deepinmind.com/jvm/2014/04/11/classnotfoundexception-is-it-slowing-down-your-jvm.html ...

  3. Class.forName()用法及与new区别

    平时开发中我们经常会发现:用到Class.forName()方法.为什么要用呢? 下面分析一下: 主要功能Class.forName(xxx.xx.xx)返回的是一个类Class.forName(xx ...

  4. shell导出mysql部分数据

    #!/bin/shSYSTEM=`uname -s` echo "echo"$SYSTEM if [[ $SYSTEM = "Linux" ]]; then   ...

  5. python中的generator(coroutine)浅析和应用

    背景知识: 在Python中一个function要运行起来,它在python VM中需要三个东西. PyCodeObject,这个保存了函数的代码 PyFunctionObject,这个代表一个虚拟机 ...

  6. ubuntu gtk2.0 一个简单完整的窗口

    //gtk_main();开了线程,关闭窗口并不能退出程序,需要手动添加 //gtk2.0,window quit compelete example #include <gtk/gtk.h&g ...

  7. javascript对象创建方式

    工厂模式 在ECMAscript中无法创建类,所以开发人员就发明了一种函数,用函数来封装,以特定接口创建对象的细节,如下面的例子所示: function createPerson(name,age,j ...

  8. 【转】}目前比较全的CSS重设(reset)方法总结

    在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视 ...

  9. 图片资源的加密和cocos2d-x中的解密

    主要处理png图片,其他格式图片也是一样的原理.阅读前可以简略了解一下png格式图片的Data trunck. 首先使用python脚本去掉png的PNG SIG(8 bytes) 以及末尾的PNGI ...

  10. JS中parseInt()、Numer()深度解析

    JS中字符串转换为数字有两种方式: 1.parseInt函数 定义:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/ ...