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 这个非常有意思的 ...
随机推荐
- discuz功能列表
导航旁边的+就可以把其加入到常用操作 上 首页 管理中心首页 文件校验,在线成员,管理团队留言.系统信息.开发 团队介绍. 常用操作管理 名称和URL 全局 站点信息 站点名称.网站名称,网站URL. ...
- 由于拷贝的文件太大，不可能一直开着SHELL,所以让SCP后台运行
原文地址: http://blog.itpub.net/90618/viewspace-750822/ 1:开一个终端,scp命令运行后,输入密码让其拷贝 # scp chris@221.179.1. ...
- 【C#高级编程】笔记之核心C#
Main()方法 每一个C#可执行文件(如控制台程序.Windows程序和Windows服务)都必须有一个入口点——Main()方法(注意M大写). 这个方法必须是类或静态方法,并且返回类型必须是in ...
- Deployment failure on Tomcat 7.x. Could not copy all resources to
今天在网上部署项目的时候出现在了问题 tomcat一直部署不上 网上查了一下 原因记下来供大家查看 [plain] <span style="font-size:18px;" ...
- NFV/SDN驱动OSS转型
- Python 3.6学习笔记（一）
知识是一座宝库,而实践就是开启这座宝库的钥匙. ----Thomas Fuller 开始之前 基础示例 Python语法基础,python语法比较简单,采用缩紧方式. # print absolute ...
- 【BZOJ】【1014】【JLOI2008】火星人prefix
Splay/二分/Hash 看了网上的题目关键字(都不用点进去看……我也是醉了)了解到做法= =那就上呗,前面做了好几道Splay的题就是为了练手搞这个的. Hash判断字符串是否相同应该很好理解吧? ...
- connection to sys should be as sysdba or sysoper 解决的方法
连接时提示: 出现了例如以下的情况:EXP-00056;遇到ORACLE错误28009. ORA-28009:connection to sys should be as sy ...
- 使用java api操作HDFS文件
实现的代码如下: import java.io.IOException; import java.net.URI; import java.net.URISyntaxException; import ...
- libcurl使用easy模式阻塞卡死等问题的完美解决---超时设置
libcurl使用时疑难问题: 在使用libcurl时, jwisp发现, curl_easy_perform是阻塞的方式进行下载的, curl_easy_perform执行后,程序会在这里阻塞等待下 ...