基础知识--:before伪元素和:after伪元素
http://book.51cto.com/art/201108/285688.htm
3.7 替换指定位置
大家都知道before和after是前、后的意思。但是奇怪的是,CSS中的:before伪元素和:after伪元素是为源文档中不存在的内容设置样式的。
没有内容怎么设置样式呢?别急!它们有一个content属性,一起使用就可以为某个选择器前、后的内容设置样式了。
下面就来了解一下:before伪元素和:after伪元素的用法。
视频教学:光盘/视频/3/3.7 替换指定位置.avi 长度:7分钟
3.7.1 基础知识--:before伪元素和:after伪元素
:before用来和content属性一起使用,设置在对象之前(依据对象树的逻辑结构)显示的内容,语法格式如下:
- Selector : before { sRules }
例如:
- q:before {
- content: open-quote;
- color: red
- }
:after用来和content属性一起使用,设置在对象之后(依据对象树的逻辑结构)显示的内容,语法格式如下:
- Selector : after { sRules }
例如:
- body:after {
- content: "The End";
- display: block;
- margin-top: 2em;
- text-align: center;
- }
从语句中可以看到:before和:after都需要与content属性一起使用。在表3-1中列出了常用content参数名称及说明。
表3-1 常用content参数表
参数名称 |
说 明 |
attr(alt) : |
使用alt特性的文字 |
counter(name) |
使用已命名的计数器 |
counter(name, list-style-type) |
使用已命名的计数器并遵从 指定的list-style-type属性 |
counters(name, string) |
使用所有已命名的计数器 |
counters(name, string, list-style-type) |
使用所有已命名的计数器并遵 从指定的list-style-type属性 |
no-close-quote |
不插入quotes属性的后元素。 但增加其嵌套级 |
no-open-quote |
不插入quotes属性的前元素。 但减少其嵌套级别 |
close-quote |
插入quotes属性的后元素 |
open-quote |
插入quotes属性的前元素 |
string |
使用引号括起的字符串 |
url |
使用指定的绝对或相对地址 |
假设,有一个HTML页面中包含了如下的代码:
- <style type="text/css">
- h1:before{ content: "标题:"; }
- p{color:blue}
- </style>
- <h1>花开已远</h1>
- <p>你所去的地方,是不是没有寒冷,也没有忧伤。</p>
运行后会发现,在"花开已远"文字之前多出了"标题:"文字,效果如图3-16所示。
图3-16 实例运行效果 |
基础知识--:before伪元素和:after伪元素的更多相关文章
- CSS基础知识之float
前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...
- Java基础知识-去重
java基础知识-去掉list集合中的重复元素: 思路: 首先新建一个容器resultList用来存放去重之后的元素 然后遍历sourceList集合中的元素 判断所遍历的元素是否已经存在于resul ...
- Matplotlib基础知识
Matplotlib基础知识 Matplotlib中的基本图表包括的元素 x轴和y轴 axis水平和垂直的轴线 x轴和y轴刻度 tick刻度标示坐标轴的分隔,包括最小刻度和最大刻度 x轴和y轴刻度标签 ...
- CSS基础知识(颜色、伪类、盒子模型)
6.设置颜色单位 L 普通英文单词 {color : 属性值red;} 此方法简单,便捷.但设置的颜色在不同浏览器中,可能显示的颜色出现差异 * 三原色 - 红.绿.蓝 L 颜色的八进制方式 ...
- after及before伪元素及解决父元素塌陷的几种方法
一.伪类和伪元素 CSS中伪类和伪元素有很多,也很好用!如果熟练使用的话可以解决很多问题 首先明白什么是伪类:伪类是基于当前元素的状态,而不是元素的id class等静态标志,它是动态变化的,它会在一 ...
- CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- css伪元素选择器(伪对象选择器)checked + 伪元素练习
伪对象也叫伪元素,在过去,伪类和伪元素都被书写成前面只加一个冒号,实际上应该是: :weilei ::伪元素 而现在我们为了兼容旧的书写方式,用一个冒号引导伪类也是能被解析的. 伪类一般反应无法在CS ...
随机推荐
- 7、Class文件的格式
Class文件的格式 1.magic(魔数) 身份标识,用来标记这是不是一个CLASS文件 CLASS的魔数比较有浪漫气息,是0xCAFEBABE(咖啡宝贝),也标识着将来JAVA咖啡商标: 2.之后 ...
- 异常 java.lang.IllegalArgumentException: Result Maps collection already contains value
这是因为用了一次以上(多次)mbg导致sql映射文件堆积导致的异常,删除对应的sql映射文件,然后重新生成即可. Caused by: java.lang.IllegalArgumentExcepti ...
- Django高并发负载均衡
1 什么是负载均衡? 当一台服务器的性能达到极限时,我们可以使用服务器集群来提高网站的整体性能.那么,在服务器集群中,需要有一台服务器充当调度者的角色,用户的所有请求都会首先由它接收,调度者再根据每台 ...
- Grid布局20行代码快速生成瀑布流
网格布局 Grid 布局,好用又简单,至少比 Flex 要人性化一点,美中不足就是浏览器支持度差点. DOM结构 中间夹层为了后续拓展. CSS .grid { display: grid; grid ...
- spring cloud资料汇总
https://www.cnblogs.com/Java3y/p/9540386.html#commentform --非常好的文章,里面还有海量学习资料
- WebGL模型拾取——射线法
今天要把WebGL中一个非常重要的算法记录下来——raycaster射线法拾取模型.首先我们来了解一下为什么要做模型拾取,我们在做webgl场景交互的时候经常要选中场景中的某个模型,比如鼠标拖拽旋转, ...
- Top 10 Javascript MVC 框架
在网上偶然看到了,几种MVC框架各有优缺点,但Backbone和Ember的呼声相对更高-大家参考一下哈- http://codebrief.com/2012/01/the-top-10-javasc ...
- 《Linux内核分析与设计实现》读书笔记一
第一章 Linux内核简介 1.1 Unix的历史 Unix的特点: Unix很简洁,仅仅提供几百个系统调用并且有一个非常明确的设计目的: 在Unix中,所有的东西都被当做文件对待. Unix的内核和 ...
- 2017-2018 第一学期201623班《程序设计与数据结构》-第7&8周作业问题总结
一.作业内容 第7周作业 http://www.cnblogs.com/rocedu/p/7484252.html#WEEK07 第8周作业 http://www.cnblogs.com/rocedu ...
- 小组成员的github地址
袁颖https://github.com/joanyy/test 魏晓 https://github.com/weixiaohaobaobao/test 张晓磊 https://github.com/ ...