css before和after伪元素应用
1、说明
":before" 伪元素可以在元素的内容前面插入新内容。
":after" 伪元素可以在元素的内容之后插入新内容。
伪元素默认展示为inline，
即
display: inline;
必须写content属性，不然伪类不起作用！
2、兼容性
伪元素有2种写法，单冒号和双冒号，单冒号和双冒号作用是一样的。
兼容性查看：http://caniuse.com/#search=%3Abefore
从上图看见：IE8浏览器只支持单冒号写法，不支持双冒号写法，因此建议before和after伪元素采用单冒号写法。
3、应用
（1）清除浮动
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
（2）添加美化图标
如清除ul li显示默认的小黑点，添加美化的符号
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>css 伪元素应用--添加美化图标</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
font-size: 14px;
} ul {
margin: 100px;
list-style: none;
} li:before {
display: inline-block;
content: "";
width: 4px;
height: 4px;
background: #0e337a;
position: relative;
left: 0;
top: -3px;
margin-right: 5px;
}
</style>
</head> <body>
<ul>
<li>1、before伪元素使用</li>
<li>2、after伪元素使用</li>
</ul>
</body> </html>
效果：
说明：将伪元素设置为的块级元素，伪元素同样拥有盒模型的概念。
css before和after伪元素应用的更多相关文章
- css ::before和::after伪元素的用法
css ::before和::after伪元素的用法:http://blog.dimpurr.com/css-before-after/
- CSS你所不知的伪元素的用法
你所不知的 CSS ::before 和 ::after 伪元素用法 博客分类: Div / Css / XML / HTML5 CSS 有两个说不上常用的伪类 :before 和 :after, ...
- CSS——你所不知的 CSS ::before 和 ::after 伪元素用法（转）
你所不知的 CSS ::before 和 ::after 伪元素用法 CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前 ...
- 你所不知的 CSS ::before 和 ::after 伪元素用法
CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...
- css before，after伪元素妙用
我们知道,css伪元素包括after,before,first-letter等,通过合理的利用伪元素,我们可以让我们的结构更简洁. 通常写法如p::after{content:' '},其中conte ...
- CSS ::before 和 ::after 伪元素另类用法
原文地址:http://justcoding.iteye.com/blog/2032627 CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是 ...
- CSS before和after伪元素
CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,它们是以CSS选择器的形式出现的,具有标签的表现效果,但是呢又不是真正的标签元素,所以叫做“伪元素”.下面就说一下常见的两个伪元素before和 ...
- CSS ::before 和 ::after 伪元素用法
CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...
- 从知乎首页用户操作入口学习到的CSS技巧 - 合理利用伪元素实现一些装饰样式
最近在模仿做一个静态的PC版知乎,在模仿的过程中,从知乎工程师的方法中学到了不少知识,比如CSS方面的,以下介绍一个今天学到的伪元素的技巧. 示例 DOM结构为: <div class=&quo ...
- [转]你所不知的 CSS ::before 和 ::after 伪元素用法
SS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思的 ...
随机推荐
- 不错的SDL源码分析
SDL源码分析 1:初始化(SDL_Init()) 2:窗口(SDL_Window) 3:渲染器(SDL_Renderer) 4:纹理(SDL_Texture) 5:更新纹理(SDL_UpdateT ...
- 记录一次软件Bug发生的过程
结束一周的紧张工作,难得的休息时光,坐在电脑前浏览博客.听听歌.看看大片,这也算是一种享受. 因为年度的开发任务已经开始了,所以最近会特别忙,新人的成长又没有想象中的好,经常在他们身上看到自己去年的影 ...
- inux下查看.so和可执行文件是否debug编译的方法
命令 readelf -S libxxx.so |grep debug 如果有打印信息就是debug,否则是release.
- .Net C#上传文件最大设置
<!--网页允许的最大设置节点--> <system.web> <httpRuntime targetFramework="4.5" maxReque ...
- jQuery中的观察者模式(Observer Pattern)
在jQuery中,on方法可以为元素绑定事件,trigger方法可以手动触发事件,围绕这2个方法,我们来体验jQuery中的观察者模式(Observer Pattern). ■ on方法绑定内置事件, ...
- 模拟出ios中流行的黑色背景底
[activityIndicatorView setBackgroundColor:[UIColor colorWithRed: green: blue: alpha:0.4]]; 用上面的语法,可以 ...
- 分析oracle索引空间使用情况，以及索引是否须要重建
分析索引空间使用情况.以及索引是否须要重建 分析其它用户下的索引须要 analyze any的权限 分析索引前先查看表的大小和索引的大小,假设索引大小和表大小一样大或者大于表的大小,那么能够推断索引可 ...
- vc中nmake.exe cl.exe 的使用
首先简单介绍一下程序是如何编译链接的.程序写好之后,我们进行编译和链接来产生可执行程序.这时候,编译器为了完成编译和链接,需要知道很多信 息.比如要编译的文件是哪一个,使用哪些编译选项进行编译,编译好 ...
- 如何设置eclipse不同的workspace共享配置
在很多的项目中,每个项目使用一个workspace,结果每新建一个workspace重新配置一下,但是配置的东西都是一样的,烦死了,有什么好办法可以共享一下配置呢? 总结一下,复制工作空间配置步骤如下 ...
- uestc 360(区间合并)
题意:有一个长度为n的序列.然后有两种操作,Q a b是输出区间a b内最长上升子序列的长度.A a b c是把区间a b内全部数字加上c. 题解:用线段树维护区间的最长上升子序列长度,那么一个区间的 ...