使用伪类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个状态应用样式,引入伪类的概念. 什么是伪类呢?简单点说,就是你没定义这个类, ...
随机推荐
- Cocos2D中的Framerate状态
对于额外绘制调试物理引擎的支持,Cocos2D同样可以绘制概述计数器,尤其是帧速率(framerate)显示. 为了启用这些概述计数器标签,你只需添加如下一行代码,比如说在AppDelegate.m里 ...
- hibernate关联对象的增删改查------查
本篇博客是之前博客hibernate关联对象的增删改查------查 的后继,本篇代码的设定都在前文已经写好,因此读这篇之前,请先移步上一篇博客 //代码片5 SessionFactory sessi ...
- window环境下搭建react native及相关插件
可以先浏览一下中文翻译的开发文档具体了解一下关于React Native,想要查看官方文档可以点http://facebook.github.io/react-native/docs/getting- ...
- Cocos2D中的纹理大小计算
纹理占用的内存大小是纹理尺寸乘以颜色深度. 图片文件的大小一般很小.一个初学者常见的错误是假设纹理内存使用量和图片大小一致. 哎,纹理内存(对于非压缩格式)的大小可以用以下伪代码来计算: pixelW ...
- 点击table中的某一个td,获得这个tr的所有数据
功能: 点击table中的某一个td,获得这个tr的所有数据 效果图 <html> <head> <script> function getData2(elemen ...
- 【Java编程】Java在dos窗口编译与执行的批处理
最近在Java编程过程中,常用到dos窗口对程序进行编译与运行.但是不方便之处在于每次都要输入命令进入将要编译的程序的目录(其实也有简单的方法,在文章末尾给出).于是编写了一个配置文件,可以一次修改, ...
- windows下c语言获取程序当前的执行目录，读文件的代码片
代码如下: #include "stdafx.h" #include "stdlib.h" #include <direct.h> #include ...
- UTL_DBWS - Consuming Web Services in Oracle 10g Onward
from:http://oracle-base.com/articles/10g/utl_dbws-10g.php In a previous article I presented a method ...
- Universal-Image-Loader源码分析，及常用的缓存策略
讲到图片请求,主要涉及到网络请求,内存缓存,硬盘缓存等原理和4大引用的问题,概括起来主要有以下几个内容: 原理示意图 主体有三个,分别是UI,缓存模块和数据源(网络).它们之间的关系如下: ① UI: ...
- MR for Baum-Welch algorithm
The Baum-Welch algorithm is commonly used for training a Hidden Markov Model because of its superior ...