基础知识--: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.伪元素选择器 伪元素选择器不是针对真

js if for 详解 获取元素方式 及一些js 基础知识

##获取元素的新方法## --document.querySelector('Css Selector{css选择器}') 接收一个css选择器(通配,群组,类,包含,id....等) 若这个选择器对应的是一组元素,就找第0个,注意js从0开始计数.CSS计数从一开始. ##判断## 当同一种操作有两种不同结果时要用if if(判断条件){ 条件成立执行内容 }else{ 条件不成立执行内容} if括号中真正接收的是布尔值即true 或 false if(最终接收内容为true或false){

哈希表基础知识

哈希表基础知识 哈希法又称散列法.杂凑法以及关键字地址计算法等,相应的表称为哈希表,是基于快速存取的角度设计的,也是一种典型的“空间换时间”的做法. 其基本思想是:首先在元素的关键字k和元素的存储位置p之间建立一个对应关系f,使得p=f(k),f称为哈希函数.创建哈希表时,把关键字为k的元素直接存入地址为f(k)的单元:以后当查找关键字为k的元素时,再利用哈希函数计算出该元素的存储位置p=f(k),从而达到按关键字直接存取元素的目的. 但关键字集合很大时,关键字值不同的元素可能会映射到哈希表的同