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属性一起使用,设置在对象之前(依据对象树的逻辑结构)显示的内容,语法格式如下:

  1. Selector : before { sRules }

例如:

  1. q:before {
  2. content: open-quote;
  3. color: red
  4. }

:after用来和content属性一起使用,设置在对象之后(依据对象树的逻辑结构)显示的内容,语法格式如下:

  1. Selector : after { sRules }

例如:

  1. body:after {
  2. content: "The End";
  3. display: block;
  4. margin-top: 2em;
  5. text-align: center;
  6. }

从语句中可以看到: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页面中包含了如下的代码:

  1. <style type="text/css">
  2. h1:before{ content: "标题:";   }
  3. p{color:blue}
  4. </style>
  5. <h1>花开已远</h1>
  6. <p>你所去的地方,是不是没有寒冷,也没有忧伤。</p>

运行后会发现,在"花开已远"文字之前多出了"标题:"文字,效果如图3-16所示。

 
图3-16  实例运行效果

基础知识--:before伪元素和:after伪元素的更多相关文章

  1. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

  2. Java基础知识-去重

    java基础知识-去掉list集合中的重复元素: 思路: 首先新建一个容器resultList用来存放去重之后的元素 然后遍历sourceList集合中的元素 判断所遍历的元素是否已经存在于resul ...

  3. Matplotlib基础知识

    Matplotlib基础知识 Matplotlib中的基本图表包括的元素 x轴和y轴 axis水平和垂直的轴线 x轴和y轴刻度 tick刻度标示坐标轴的分隔,包括最小刻度和最大刻度 x轴和y轴刻度标签 ...

  4. CSS基础知识(颜色、伪类、盒子模型)

    6.设置颜色单位 L    普通英文单词 {color : 属性值red;} 此方法简单,便捷.但设置的颜色在不同浏览器中,可能显示的颜色出现差异 * 三原色 - 红.绿.蓝 L   颜色的八进制方式 ...

  5. after及before伪元素及解决父元素塌陷的几种方法

    一.伪类和伪元素 CSS中伪类和伪元素有很多,也很好用!如果熟练使用的话可以解决很多问题 首先明白什么是伪类:伪类是基于当前元素的状态,而不是元素的id class等静态标志,它是动态变化的,它会在一 ...

  6. CSS3之伪元素选择器和伪类选择器

    伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...

  7. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  8. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  9. css伪元素选择器(伪对象选择器)checked + 伪元素练习

    伪对象也叫伪元素,在过去,伪类和伪元素都被书写成前面只加一个冒号,实际上应该是: :weilei ::伪元素 而现在我们为了兼容旧的书写方式,用一个冒号引导伪类也是能被解析的. 伪类一般反应无法在CS ...

随机推荐

  1. 7、Class文件的格式

    Class文件的格式 1.magic(魔数) 身份标识,用来标记这是不是一个CLASS文件 CLASS的魔数比较有浪漫气息,是0xCAFEBABE(咖啡宝贝),也标识着将来JAVA咖啡商标: 2.之后 ...

  2. 异常 java.lang.IllegalArgumentException: Result Maps collection already contains value

    这是因为用了一次以上(多次)mbg导致sql映射文件堆积导致的异常,删除对应的sql映射文件,然后重新生成即可. Caused by: java.lang.IllegalArgumentExcepti ...

  3. Django高并发负载均衡

    1 什么是负载均衡? 当一台服务器的性能达到极限时,我们可以使用服务器集群来提高网站的整体性能.那么,在服务器集群中,需要有一台服务器充当调度者的角色,用户的所有请求都会首先由它接收,调度者再根据每台 ...

  4. Grid布局20行代码快速生成瀑布流

    网格布局 Grid 布局,好用又简单,至少比 Flex 要人性化一点,美中不足就是浏览器支持度差点. DOM结构 中间夹层为了后续拓展. CSS .grid { display: grid; grid ...

  5. spring cloud资料汇总

    https://www.cnblogs.com/Java3y/p/9540386.html#commentform --非常好的文章,里面还有海量学习资料

  6. WebGL模型拾取——射线法

    今天要把WebGL中一个非常重要的算法记录下来——raycaster射线法拾取模型.首先我们来了解一下为什么要做模型拾取,我们在做webgl场景交互的时候经常要选中场景中的某个模型,比如鼠标拖拽旋转, ...

  7. Top 10 Javascript MVC 框架

    在网上偶然看到了,几种MVC框架各有优缺点,但Backbone和Ember的呼声相对更高-大家参考一下哈- http://codebrief.com/2012/01/the-top-10-javasc ...

  8. 《Linux内核分析与设计实现》读书笔记一

    第一章 Linux内核简介 1.1 Unix的历史 Unix的特点: Unix很简洁,仅仅提供几百个系统调用并且有一个非常明确的设计目的: 在Unix中,所有的东西都被当做文件对待. Unix的内核和 ...

  9. 2017-2018 第一学期201623班《程序设计与数据结构》-第7&8周作业问题总结

    一.作业内容 第7周作业 http://www.cnblogs.com/rocedu/p/7484252.html#WEEK07 第8周作业 http://www.cnblogs.com/rocedu ...

  10. 小组成员的github地址

    袁颖https://github.com/joanyy/test 魏晓 https://github.com/weixiaohaobaobao/test 张晓磊 https://github.com/ ...