最近接触到的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. AOP报错：Caused by: java.lang.IllegalArgumentException: error at ::0 can't find referenced pointcut

    Spring3.x升级4.x时遇到的,JDK版本1.7 aspectj版本问题,1.6.x升级到1.7.x,解决!

  2. python学习之迭代器与生成器

    1.迭代器省内存 迭代器只允许往后读数据,不允许回读数据 迭代器不能跳着读文件,因为他是一点一点加载文件内容到内存的,读完了可以销毁或丢掉 2.生成一个迭代器 a = iter(["fd&q ...

  3. jdbc连接mysql

    package june25jdbcTest; import java.sql.Connection;import java.sql.DriverManager;import java.sql.Res ...

  4. webstorm vue高亮

    文件->设置->文件类型 第一步 第二步选择html 添加*.vue 搞定

  5. 2017年1月1日 星期日 --出埃及记 Exodus 21:27

    2017年1月1日 星期日 --出埃及记 Exodus 21:27 And if he knocks out the tooth of a manservant or maidservant, he ...

  6. 用JavaScript实现的选项卡

    Codes wins arguments! <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  7. 如何在RCP程序中添加一个banner栏

    前言:这段时间还算比较空闲,我准备把过去做过的有些形形色色,甚至有些奇怪的研究总结一下,也许刚好有人用的着也不一定,不枉为之抓耳挠腮的时光和浪费的电力.以前有个客户提出要在RCP程序中添加一个bann ...

  8. ContentProvider跨进程共享数据

    借用ContentResolver类访问ContentProvider中共享的数据.通过getContentResolver()方法获得该类的实例. ContentResolver中的方法:inser ...

  9. shell,bash,git bash,xshell,ssh

    一:shell是linux/unix系统的外壳,也可以理解为命令行接口,就是你输入并执行命令行的地方.bash(born again shell)是shell的一种,最常用的shell之一.你在你的l ...

  10. excel单元格内换行

    强制换行:将光标置于拟换行处,按ALT+Enter键,即可强行换行.