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 这个非常有意思的 ...
随机推荐
- Linux- systemd
systemd被设计用来改进sysvinit的缺点,它和ubuntu的upstart是竞争对手,预计会取代它们.systemd的很多概念来源于苹果的launchd.创始人Lennart是redhat员 ...
- waitdialogform z
namespace DevExpress.Utils { using DevExpress.LookAndFeel; using DevExpress.Skins; using DevExpress. ...
- ActiveX控件开发
VC2005从开发MFC ActiveX ocx控件到发布到.net网站的全部过程 开篇语:最近在弄ocx控件发布到asp.net网站上使用,就是用户在使用过程中,自动下载安装ocx控件.(此文章也是 ...
- pytest文档18-配置文件pytest.ini
前言 pytest配置文件可以改变pytest的运行方式,它是一个固定的文件pytest.ini文件,读取配置信息,按指定的方式去运行. ini配置文件 pytest里面有些文件是非test文件 py ...
- 《Windows核心编程》第十一章——线程池
隐式使用工作项 #include <iostream> #include <windows.h> ; VOID NTAPI SimpleCallback(PTP_CALLBAC ...
- opencv cuda TK1 TX1 兼容设置
cmake设置 CUDA_ARCH_BIN 3.2 5.2 CUDA_ARCH_PTX 3.2 5.2 否则报一下错误: OpenCV Error: Gpu API call (NCV Asserti ...
- 【BZOJ】【2752】【HAOI2012】高速公路(Road)
数学期望/线段树 然而又是一道road= =上一道是2750…… 下次不要一看期望题就弃疗么…… 期望题≠不可做题……!! 其实在这题中,期望就是(所有情况下 权值之和)/(总方案数) 因为是等概率抽 ...
- c++学习之友元
最近工作好累呀,晚上总是失眠,自学c++的步骤都放慢了,本来之前看c++ primer的,结果这本书讲的太细节了,初学者不是很好把握.所以我又重新找了个教程,比较适合初学者.今天学习到友元函数和友元类 ...
- pytorch 学习问题
https://pytorch.org/tutorials/beginner/blitz/neural_networks_tutorial.html#sphx-glr-beginner-blitz-n ...
- CSS 的优先级机制总结
一.样式优先级: 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使用多重样式的情况. 一般情况下,大家都认为优先级是:内联样式 > 内部样 ...