CSS3选择器 ::before和::after
:before
和:after
伪元素的用法
:before
和:after
伪元素的用法十分简单;下面的代码样例中, :before
和 :after
将会在 blockquote
元素之前和之后插入新内容,它使用content
属性,也就是在内容
上进行操作。
下面的代码中一个引号标记将出现在blockquote
元素的之前和之后。
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
:before
和:after
伪元素的CSS样式
:before
和:after
虽然是伪元素,但它们所有用法和行为表现和真正的元素几乎完全一样;我们可以对它们进行任何的CSS样式设置,例如,改变它们的前景颜色,增加背景色/图,调整字体大小,调整对齐方式等等。
blockquote:before {
content: open-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: left;
position: relative;
top: 30px; }
blockquote:after {
content: close-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: right;
position: relative;
bottom: 40px;
}
:before
和:after
伪元素宽度和高度设置
:before
和:after
伪元素在页面中生成的元素在缺省情况下是“内联(inline)”元素,如果我们想指定它们的高度和宽度,需要首先定义它们为一个block元素,使用display: block;
。
blockquote:before {
content: open-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: left;
position: relative;
top: 30px;
border-radius: 25px; /** 定义成 block 元素 **/
display: block;
height: 25px;
width: 25px;
}
blockquote:after {
content: close-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: right;
position: relative;
bottom: 40px;
border-radius: 25px; /** 定义成 block 元素 **/
display: block;
height: 25px;
width: 25px;
}
给:before
和:after
伪元素添加背景图/背景色
我们不仅可以设置content
的文字内容,而且可以给它添加图片和背景图片。尽管content
属性直接支持url()
语法来插入一个图片,但在大多数情况下,我们更常用的是使用background
属性来控制图片的显示。
blockquote:before {
content: " ";
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
float: left;
position: relative;
top: 30px;
border-radius: 25px; background: url(images/quotationmark.png) -3px -3px #ddd; display: block;
height: 25px;
width: 25px;
}
blockquote:after {
content: " ";
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
float: right;
position: relative;
bottom: 40px;
border-radius: 25px; background: url(images/quotationmark.png) -1px -32px #ddd; display: block;
height: 25px;
width: 25px;
}
然而,你也看到了,在上面的代码片段中,我们仍然声明了content
属性,并设置它的值为空字符串。这个content
属性,在这里是必须的,如果没有它,这些伪元素将不能正常显示。
将:before
和:after
伪元素和伪类(pseudo-classes)混合使用
尽管伪元素和伪类是不同的东西,但我们可以将它们在同一个CSS规则里混合使用,例如,如果你想要这样的一个效果:当鼠标移动到blockquote
元素上时,由伪元素生成的“引号”的颜色变深,下面的代码就可以达到这样的效果。
blockquote:hover:after, blockquote:hover:before {
background-color: #555;
}
CSS3选择器 ::before和::after的更多相关文章
- 总结30个CSS3选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...
- 总结30个CSS3选择器(转载)
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- CSS3 选择器——属性选择器
上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
- css3 选择器(三)
接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...
- CSS3选择器介绍
1.css3属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- CSS3 选择器——基本选择器
CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...
- CSS3选择器的研究,案例
在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器,和伪类选择器,当是并没有做案例的研究,本想在那篇文章里面写,但想想如果把案例都写在那篇文章里面,对于查找来说就不是很方便,所有另开一篇来讲 ...
- css3选择器(一)
直接开始正文. 一.css3同级元素通用选择器[update20161228] 选择器:E~F 匹配任何在E元素之后的同级F元素 Note:E~F选择器选中的是E元素后面同级元素中的全部F元素. 例: ...
- css3 选择器(二)
接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n&qu ...
- [css3]CSS3选择器:nth-child和:nth-of-type之间的差异
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1709 一.深呼吸,直 ...
随机推荐
- [codeforces743C]:Vladik and fractions(数学)
题目传送门 题目描述 请找出一组合法解使得$\frac{1}{x}+\frac{1}{y}+\frac{1}{z}=\frac{2}{n}$成立. 其中$x,y,z$为正整数且互不相同. 输入格式 一 ...
- win10文件夹不自动刷新的解决方案
win10文件夹不自动刷新的解决方案 https://jingyan.baidu.com/article/d7130635d45a5013fcf47544.html
- easyui表格适应bootstrap
.panel1 { overflow: hidden; text-align: left; margin:; border:; -moz-border-radius: 0 0 0 0; -webkit ...
- leetcode 695 Max Area of Island 岛的最大面积
这个题使用深度优先搜索就可以直接遍历 DFS递归方法: class Solution { public: vector<vector<,},{,-},{,},{,}}; int maxAr ...
- Vue实现音乐播放器(四):页面入口+header组件的编写
首先下载三个包 babel-runtime对es语法进行转义 fastclick解决移动端点击300毫秒延迟的问题 babel-polyfill对es6 api进行转义 下载了包之后要在main.js ...
- 几个模拟OLE事件注册、调用的宏
最近遇到一个要求,将原来的OCX控件,替换成直接的DLL调用. 遇到OLE的事件回调,写了三个宏,用于简化代码 #define OLE_ENVENT_IN_CLASS_ONE(event_name, ...
- Myeclipse 快捷键大全(绝对全)
非常感谢分享这篇文章的大虾..但是我忘了几下您的blog地址,因此无法注明原文地址...见谅哈 存盘 Ctrl+s(肯定知道) 注释代码 Ctrl+/ 取消注释 Ctrl+\(Eclipse3已经都合 ...
- Spring之使用注解实例化Bean并注入属性
1.准备工作 (1)导入jar包 除了上篇文章使用到的基本jar包外,还得加入aop的jar包,所有jar包如下 所需jar包 (2)配置xml <?xml version="1.0& ...
- Python时间模块datetime用法
时间模块datetime是python内置模块,datetime是Python处理日期和时间的标准库. 1,导入时间模块 from datetime import datetime 2,实例 from ...
- mssql 取数据指定条数(例:100-200条的数据)
方法1:临时表 * into #aa from table order by time-- 将top m笔插入 临时表 select * from #aa order by time desc --d ...