基础知识--: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伪元素相关推荐

HTML基础知识（一）：行内元素，块级元素，行内块元素
文章目录一.html元素分类二.块元素三.行内元素四.行内块元素五.替换元素和非替换元素六.元素转换七.总结一.html元素分类 html元素:行内元素.块元素.行内块元素二.块元素 ...
ZooKeeper基础知识笔记（含3节点伪分布式安装配置流程）
本笔记涉及代码:https://github.com/hackeryang/Hadoop-Exercises/tree/master/src/main/java/ZooKeeper 一.ZooKeep ...
前端基础知识（五）JS删除数组元素的方法
一.length属性 JS 中Array的length长度非常有特点,他不是只读的,因此可以设置. var colors = ["red","blue",&qu ...
【基础知识】如何在浏览器中查找元素属性节点
首先,什么是属性节点?属性节点是在编写html代码时,在html标签中添加的属性. 本文重点:如果您用的ie,我恳请您不要在用了,你们的每次使用都是打在前端工程师身上的一发子弹代码实例: <! ...
css before after用法_CSS 伪元素基础知识：content 与counter 实用技巧（二）
在CSS 伪元素基础知识:before 与after (一),笔者已经介绍过 CSS 里的::before 和::after 这两个伪元素,以及content 相关的用法,这篇将针对content 搭 ...
CSS基础知识（颜色、伪类、盒子模型）
6.设置颜色单位 L 普通英文单词 {color : 属性值red;} 此方法简单,便捷.但设置的颜色在不同浏览器中,可能显示的颜色出现差异 * 三原色 - 红.绿.蓝 L 颜色的八进制方式 ...
CSS基础知识(表单标签、事件、CSS介绍、选择器、伪类选择器案例、样式、盒子模型、定位)...
一. 表单标签 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...
html伪类选择器结构,子元素伪类选择器 - CSS3 | 绿叶学习网
子元素伪类选择器,指的就是选择某一个元素下的子元素.伪类选择器,相信小伙伴也接触过了,最典型的就是超链接的几个伪类:a:link.a:visited.a:hover.a:active. 在CSS3中, ...

基础知识--:before伪元素和:after伪元素

基础知识--:before伪元素和:after伪元素相关推荐

最新文章

热门文章