使用伪类before和after
li{
position: relative;
float: left;
width: 80px;
list-style: none;
text-align: center;
}
.hover>li:before{
content: "";
border-bottom: 2px solid #5ac;
position: absolute;
top: 20px;
width: 0;
left: 50%;
transition: all linear .5s;
padding-bottom: 20px;
}
.hover>li:hover:before{
position: absolute;
width: 100%;
top: 20px;
left: 0;
}
.border{
position: relative;
width:150px;
height: 36px;
border:1px solid black;
border-radius:5px;
background: #eee;
margin-left: 50px;
}
.border:before,.border:after{
content: "";
display: block;
position: absolute;
top:8px;
width: 0;
height: 0;
border:6px solid transparent;
}
.border:before{
left:-11px;
border-right-color: #eee;
z-index:1
}
.border:after {
left: -12px;
border-right-color: black;
z-index: 0
}
-->
HTML5增加了一系列的伪类选择器和伪元素选择器，增加的伪元素选择器有::before、::after、::first-letter(首字母)、::first-line(首行)、::selection(文档高亮部分，如鼠标选中文字)、::backdrop(不常用)。前面四者可能比较常用，会聚集到具体某一元素上，后面两个属于全局的元素。
这里谈一下::before和::after元素的使用。
1、添加元素内容：
<!DOCTYPE html>
<html>
<head>
<title>添加元素内容</title>
<meta charset="utf-8" />
<style>
p{ padding: 20px;}
p:before{content: "我是before添加的内容"; font-weight: bold;}
p:after{content: "我是after添加的内容"; font-style: italic}
</style>
</head>
<body>
<p>我是元素里面的内容</p>
</body>
</html>
在这里添加了元素内边距，判断before和after的位置是包含在content之中还是之外，结果如下：
我是元素里面的内容
添加一个伪元素十分的简单，必须设置content属性，该元素才能展示出来(包括为空"")。并且可以发现伪元素的文字，默认是不能按照文本选择的。
2、展示列表的hover特效(利用伪元素制作动画效果)：
<!DOCTYPE html>
<html>
<head>
<title>展示边框出现效果</title>
<meta charset="utf-8" />
<style>
.hover>li{
position: relative;
float: left;
width: 80px;
list-style: none;
text-align: center;
} .hover>li:before{
content: "";
border-bottom: 2px solid #5ac;
position: absolute;
top: 20px;
width: 0;
left: 50%;
transition: all linear .5s;
padding-bottom: 20px;
}
.hover>li:hover:before{
position: absolute;
width: 100%;
top: 20px;
left: 0;
}
</style>
</head>
<body>
<ul class="hover">
<li>01组</li>
<li>02组</li>
<li>03组</li>
</ul>
</body>
</html>
上面的代码中，content，top及值，width，padding-bottom，transition都是必不可少的，只要有一点偏差就不能达到想要的效果。结果如下：
- 01组
- 02组
- 03组
3、由于这两个伪类属于元素的content部分，所以可以用来对元素进行边框外形的设置：
<!DOCTYPE html>
<html>
<head>
<title>设置边框样式</title>
<meta charset="utf-8" />
<style>
.border{
position: relative;
width:150px;
height: 36px;
border:1px solid black;
border-radius:5px;
background: #eee;
margin-left: 50px;
}
.border:before,.border:after{
content: "";
display: block;
position: absolute;
top:8px;
width: 0;
height: 0;
border:6px solid transparent;
}
.border:before{
left:-11px;
border-right-color: #eee;
z-index:1
}
.border:after {
left: -12px;
border-right-color: black;
z-index: 0
}
</style>
</head>
<body>
<div class="border"></div>
</body>
</html>
通过before和after的定位，利用位置差值和颜色差异，将突出的小角展示出来。结果如下：
利用这两个伪元素可以很方便的为当前元素设置背景、图标、动画效果，而不用在添加额外的元素。
使用伪类before和after的更多相关文章
- 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...
- CSS权威指南之css声明，伪类，文本处理--(简要笔记一)
1.css层叠的含义 后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒. 3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换 ...
- CSS-用伪类制作小箭头（轮播图的左右切换btn）
先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...
- 伪类before和after
以你添加的元素为基础!在他的里面!也就是他的内容的前面或者后面添加东西! 如果原来的元素没有内容会出现什么情况?(伪类的宽和高和元素的相等)
- 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类（一）
本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...
- 利用伪类:before&&:after实现图标库图标
一.实现如下效果 二.代码实现思路 图案一源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- CSS笔记之伪类与伪元素
伪类分为两种:UI伪类 与 结构化伪类 UI伪类:a:link{} a:hover{} a:active{} a:visited{} input[type='text']:focus{} ...
- W3School-CSS 伪类 (Pseudo-classes) 实例
CSS 伪类 (Pseudo-classes) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) ...
- <a>链接的四个伪类顺序
<a>元素的作用是可以创建一个链接,链接对应4个状态:未访问,已访问,鼠标悬停,鼠标点击瞬间. 为了给链接的4个状态应用样式,引入伪类的概念. 什么是伪类呢?简单点说,就是你没定义这个类, ...
随机推荐
- [Ext.Net]客户关系管理系统
本人在企业中非专业人士,交流学习. 1.登录 2.系统主界面 3.用户与角色 3.菜单管理 4.角色与授权 5.登陆日志 6.简易工作流 7.客户分类 8.客户管理 9.报价管理 业务员反馈 报价明细 ...
- Java进阶(五十一)必须记住的Myeclipse快捷键
Java进阶(五十一)必须记住的Myeclipse快捷键 在调试程序的时候,我们经常需要注释一些代码,在用Myeclipse编程时,就可以用 Ctrl+/ 为选中的一段代码加上以 // 打头的注释:当 ...
- 【翻译】了解ASP.NET MVC中的Ajax助手
原文:Understanding AJAX Helpers in ASP.NET MVC 作者: Shailendra Chauhan works as Software Analyst at rep ...
- 总账追朔各模块SQL
SELECT gjh.set_of_books_id, gjl.je_line_num, mta.organization_id, ood.organization_code, ood.organiz ...
- LIRe 源代码分析 6：检索（ImageSearcher）[以颜色布局为例]
===================================================== LIRe源代码分析系列文章列表: LIRe 源代码分析 1:整体结构 LIRe 源代码分析 ...
- 数据挖掘进阶之关联规则挖掘FP-Growth算法
数据挖掘进阶之关联规则挖掘FP-Growth算法 绪 近期在写论文方面涉及到了数据挖掘,需要通过数据挖掘方法实现软件与用户间交互模式的获取.分析与分类研究.主要涉及到关联规则与序列模式挖掘两块.关联规 ...
- Linux之ulimit详解(整理)
修改:一般可以通过ulimit命令或编辑/etc/security/limits.conf重新加载的方式使之生效通过ulimit比较直接,但只在当前的session有效,limits.conf中可以根 ...
- ruby调用Office Jet引擎压缩access数据库
由于单位业务需要,搭建一台服务器专门用来做数据存储.因为数据流很小,遂采用access库作为DB.开始还好,但是后来发现access数据库有一问题,就是表空间会随着使用越来越大,哪怕表里没有数据.因为 ...
- Jmeter(二十四)_服务器性能监控
下载插件 1.访问网址http://jmeter-plugins.org/downloads/all/,下载三个文件.其中JMeterPlugins-Standard和JMeterPlugins-Ex ...
- C# 中的线程安全集合类
C# 的集合类型中, 都有Synchronized静态方法, 和SyncRoot实例方法 对于ArrayList以及Hashtable 集合类来讲,当需要做到线程安全的时候,最好利用其自带的属性Syn ...