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 这个非常有意思的 ...
随机推荐
- jQuery和$、jQuery(function(){})和(function(){})(jQuery)
1.$是JQuery的别名 ,在使用上是一样的,两者可以互换位置. $==jQuery; //true $===jQuery; //true 2.jQuery(function(){ ....... ...
- mysql学习心得转
http://www.cnblogs.com/lyhabc/p/3691555.html
- Java中间件：淘宝网系统高性能利器
[TechTarget中国原创]淘宝网是亚太最大的网络零售商圈,其知名度毋庸置疑,吸引着越来越多的消费者从街头移步这里,成为其忠实粉丝.如此多的用户和交易量,也意味着海量的信息处理,其背后的IT架构的 ...
- Android图片加载框架最全解析（四），玩转Glide的回调与监听
大家好,今天我们继续学习Glide. 在上一篇文章当中,我带着大家一起深入探究了Glide的缓存机制,我们不光掌握了Glide缓存的使用方法,还通过源码分析对缓存的工作原理进行了了解.虽说上篇文章和本 ...
- [Android Pro] Swift 3.0多线程
本文只介绍Grand Central Dispath(GCD) 中央调度 个人认为一个GCD就够用了,可能是改版或是其他的在找之前写的多线程方法时发现不能用了,看文档之后发现改了,现在看上去更加简单易 ...
- OpenCV 脸部跟踪(2)
前面一篇文章中提到,我们在一副脸部图像上选取76个特征点,以及这些特征点的连通性信息来描述脸部形状特征,本文中我们会把这些特征点映射到一个标准形状模型. 通常,脸部形状特征点能 ...
- hdu 4445 Crazy Tank
#include <iostream> #include <cstdio> #include <cstring> #include <algorithm> ...
- go语言基础之可见性规则验证
1.可见性规则验证 如果想使用别的包的函数.结构体类型.络构体成员. 函数名.类型名,结构体成员变量名,首字母必段大写,可见. 如果首字母是小写,只能在同一个包里使用. 文件夹样例: 示例: vi t ...
- HttpWebRequest的使用
HttpWebRequest类主要利用HTTP 协议和服务器交互,通常是通过 GET 和 POST 两种方式来对数据进行获取和提交.下面对这两种方式进行一下说明: GET 方式 GET 方式通过在网络 ...
- JavaScript中将html字符串转化为Jquery对象或者Dom对象
实例代码: $('<a href="javascript:void(0);" onclick="showUI(this,"4028f65d5d1bb627 ...