最近接触到的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. Logstash学习-配置语法

    区段(section) Logstash 用{}来定义区域.区域内可以包括插件区域定义,你可以在一个区域定义多个插件,插件区域内则可以定义键值对设置. 数据类型 Logstash支持少量的数据值类型: ...

  2. [比较老的文章]三维渲染引擎 OGRE 与 OSG 的比较综述

    1 .引言随着计算机可视化.虚拟现实技术的飞速发展,人们对实时真实感渲染以及场景复杂度提出了更高的要求.传统的直接使用底层图形接口如OpenGL.DirectX开发图形应用的模式越来越暴露出开发复杂性 ...

  3. 获取WOED和EXCEL的公用方法

    1. 需要传入word地址 /// <summary> /// 获取WORD内容 /// </summary> /// <param name="docFile ...

  4. js 判断所选时间(或者当前时间)是否在某一时间段用于不同时间段显示不同的客服qq

    //qq交谈 var nowtimes= new Date(); var starttimes="16:30"; var endtimes="23:59"; v ...

  5. JAVA基础知识之JDBC——JDBC数据库连接池

    JDBC数据库连接池 数据库的连接和关闭是很耗费资源的操作,前面介绍的DriverManager方式获取的数据库连接,一个Connection对象就对应了一个物理数据库连接,每次操作都要打开一个连接, ...

  6. Uva 1629 切蛋糕

    题目链接:https://vjudge.net/contest/146179#problem/B 题意:一个矩形蛋糕上有好多个樱桃,现在要做的就是切割最少的距离,切出矩形形状的小蛋糕,让每个蛋糕上都有 ...

  7. CEF源码编译和生产库的使用

    CEF版本是Branch 2171 开发环境是VS2012 查看一下libcef_dll_wrapper工程属性,确定Code Generation 选择MTD(Debug) 或者MT(Release ...

  8. ElasticSearch5+logstash的logstash-input-jdbc实现mysql数据同步

    在实现的路上遇到了各种坑,再次验证官方文档只能产考不能全信! ElasticSearch安装就不说了上一篇有说! 安装logstash 官方:https://www.elastic.co/guide/ ...

  9. 【BZOJ】3436: 小K的农场

    3436: 小K的农场 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 938  Solved: 417[Submit][Status][Discuss ...

  10. 1003. Emergency (25)

    As an emergency rescue team leader of a city, you are given a special map of your country. The map s ...