最近接触到的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. iOS中如何隐藏启动图片的状态栏

    只隐藏启动图片顶部的状态栏,而不影响程序运行起来控制器的状态栏显示?在info.plist文件中添加一个Statis bar is...... 默认是NO改为YES即可

  2. 20161013001 DataGridView 数据转 DataTable

    DataTable dt2 =  GetDgvToTable(Form_CY_ProjectRequirements_D);    MessageBox.Show( dt2.Rows.Count.To ...

  3. 用Django写出“hell world”

    一.系统实战环境 1 2 3 4 系统版本:CnetOS6.5 x86_64 Django版本:Django-1.5.8 MySQL版本:MySQL-5.1.73 Python版本: python-2 ...

  4. iOS常见面试题

    一.为什么要在主线程中更新UI,这样做有什么好处? UIKit中的大部分类都不是“线程安全”的,为了解决这个线程不安全的问题,苹果推荐所有应用程序的UI操作都在主线程中执行,这样就不会出现多个线程同时 ...

  5. 一位程序员如何修炼成CTO

    几乎整个互联网行业都缺CTO,特别是一些草根背景的创业者,这个问题更加显著.从我自己的感受,身边各种朋友委托我找CTO的需求,嗯,算下来超过两位数了,光最近一个月就有3个,而且这三家都是刚拿了A轮的. ...

  6. centos升级glibc（升级到2.14版）

    1.下载源码包 到http://ftp.gnu.org/gnu/glibc/下载glibc-2.14.tar.xz 2.解压 tar glibc-2.14.tar.gz 3.创建build目录 cd ...

  7. VMWare虚拟机设置固定ip上网方法

    转自:http://blog.csdn.net/cyberrusher/article/details/7269795 1. 在VMWare工具栏中打开:编辑--->虚拟机网络编辑器, 打开VM ...

  8. TFS二次开发系列：八、TFS二次开发的数据统计以PBI、Bug、Sprint等为例(二)

    上一篇文章我们编写了此例的DTO层,本文将数据访问层封装为逻辑层,提供给界面使用. 1.获取TFS Dto实例,并且可以获取项目集合,以及单独获取某个项目实体 public static TFSSer ...

  9. （译）关于async与await的FAQ

    传送门:异步编程系列目录…… 环境:VS2012(尽管System.Threading.Tasks在.net4.0就引入,在.net4.5中为其增加了更丰富的API及性能提升,另外关键字”async” ...

  10. 解决IIS上无法添加.NET用户的问题

    最近开发了一个简单的管理后台,后台用户管理都用的是AspNetSqlMembershipProvider这一套框架,添加和删除用户的功能在开发阶段通过ASP.NET网站管理工具完成. 部署到服务器上时 ...