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

  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  实例运行效果

时间: 09-23

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

《计算机科学导论》之数据结构基础知识

<计算机科学导论(第二版)>  11章   数据结构 11.1  引言  1.为什么要使用数据结构? 尽管单变量在程序设计语言中被大量使用,但是它们不能有效地解决复杂问题.此时考虑使用数据结构. 2.数据结构是什么? 数据结构是相互之间存在一种或多种特定关系的数据元素的集合. 3.三种数据结构 数组: 记录; 链表: 大多的编程语言都隐式实现了前两种,而第三种则通过指针和记录来模拟. 11.2  数组 1.为什么使用数组? 为了处理大量的数据,需要一个数据结构,如数组.当然还有其他的数据结构.

android基础知识(4)

4.基础知识 gravity 控制组件所包含的子元素的对齐方式layout_gravity 控制该组件在父元素的对齐方式 http://blog.csdn.net/u014450015/article/details/46714323 View与ViewGroup的概念http://blog.csdn.net/u014450015/article/details/46716219 LinearLayouthttp://blog.csdn.net/u014450015/article/detail

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

伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. a:link|a:visited|a:hover|a:active 在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的,a:active 必须被置于 a:hover 之后,才是有效的. 由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得

利用伪元素对块级元素应用vetical-align:middle使之垂直居中

vetical-align的功能是使行内元素垂直对齐. 可能的值 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部. bottom 把元素的顶端与行中最低的元素的顶端对齐. text-bottom 把元素的底端与父元素字体的底端对齐. length   % 使用 "line-height&qu

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

伪对象也叫伪元素,在过去,伪类和伪元素都被书写成前面只加一个冒号,实际上应该是: :weilei ::伪元素 而现在我们为了兼容旧的书写方式,用一个冒号引导伪类也是能被解析的. 伪类一般反应无法在CSS中轻松或者可靠检测到的某个元素的 状态或属性 : 伪元素表示DOM外部的某种 文档结构 . 伪类更多的是定义元素的状态,而伪元素则是改变文档结构,在结构外另加一个没有实际存在的元素(伪元素)常用伪元素: 1. E:before/E::before 2. E:after/E::after 1. E:

Css3之高级-1 Css复杂选择器(兄弟选择器 、属性选择器、伪类选择器、伪元素选择器)

一.兄弟选择器 相邻兄弟选择器 - 相邻兄弟选择器匹配指定元素的相邻兄弟元素 - 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器 - 使用加号(+)作为结合符 通用兄弟选择器 - 通用兄弟选择器匹配某元素后面的所有兄弟元素 - 使用符号(~)作为结合符,即 element1~element2 - 两种元素必须拥有相同的父元素,但是element2不必直接紧随element1 二.属性选择器 属性选择器 - 属性选择器能够将元素附带的属性用于选择器中,从而对带

CSS中伪类选择器及伪元素

1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:visited{color:#FF0000;text-decoration:none} a:hover{color:#FF0000;text-decoration:none} a:active{color:#FF0000;text-decoration:none} 2.伪元素选择器 伪元素选择器不是针对真

CSS伪类选择器和伪元素选择器

CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 1 a:link{background-color:blue;} //未访问前深蓝色 2 a:visited{background-color:beige;} //访问过淡黄色 3 a:hover{background-color:aqua;} //鼠标悬停时水蓝色 4 a:active{background-col

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

关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因为论坛里的帖子大多不关心这种概念的细微差别,即使有人出来说一句:"这两个是不同的",也只是被更多的帖子淹没掉而已.所以觉得有必要写下这些我所知的部分,这里着重写的是为什么这两者不同,以及一些平时容易错过的细节. 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准