1、:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#zgz { color: #f00 }

#zgz:before
{
    content: "秦";
    color: red;
}

#zgz:after
{
    content: "皇";
    color: red;
}
</style>
</head>

<body>
<div id="zgz">始</div>
</body>
</html>

2、最后的输出结果应该是：秦始皇。

css3-------:before和:after的作用的更多相关文章

  1. [转载]css3属性box-sizing:border-box的作用

    http://jastate.com/css3-properties-box-sizingborder-box.html 定义和用法 按照w3c school的说法,box-sizing:border ...

  2. CSS3中box-sizing属性的作用以及应用场景

    盒模型box-sizing: 取值 1.content-box 默认值,标准盒模型,设置宽度为内容宽度,实际宽度为左右边距加上左右边框加上左右填充再加上内容宽度 2.border-box 设置宽度等于 ...

  3. css3新增属性API

    写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz-  主要是firefox火狐 -webikt-主要是chr ...

  4. 《CSS3秘籍》（第三版）-读书笔记

    第3章 选择器:明确设置哪些样式 每个样式(或者规则)由两个主要部分组成:选择器是告诉浏览器要格式化什么内容:声明块则列出浏览器用来给选择器定义样式的格式化指令. 1.标签选择器:整体控制 标签选择器 ...

  5. css3动画 bug 2点

    1. .myanimate{ transition-property: left;transition-duration: .3s;transition-timing-function: ease } ...

  6. css3动画 bug

    1. .myanimate{ transition-property: left;transition-duration: .3s;transition-timing-function: ease } ...

  7. Css3中的响应式布局的应用

    Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css" rel= ...

  8. 前端页面开发，最低兼容IE 8的多设备跨平台问题解决！

    项目要求: 网站能够使用PC.ipad.mobile phone正常访问 页面PSD版式宽度分别为1024px和750px 参考资料 使用CSS3 Media Queries,其作用就是允许添加表达式 ...

  9. css知识点积累

    关于样式的优先级问题: !important > style > [ id > class > tag ];  z-index 的属性用法: z-index属性是用来设置元素的 ...

  10. bootstrap实战教程

    bootstrap实战教程 bootstrap介绍 简介 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.全球数以百万计的网站都是 ...

随机推荐

  1. 贪婪算法（Greedy algorithm）-算法学习之旅（一）

    我研一下学期选修了网络管理,因为是限选课所以我没有认真上课,今天因为快结课考试了,我才去,然后我发现了一个大秘密...... 原来老师从第三节课已经开始讲算法导论的知识了,我是不是错过了什么... 废 ...

  2. React Native网络请求

    很多移动应用都需要从远程地址中获取数据或资源.你可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容--以下就是你会用到的东西.新手可以对照这 ...

  3. UNIX网络编程——TCP—经受时延与nagle算法、滑动窗口、拥塞窗口

    1.经受时延: TCP在接收到数据时并不立即发送ACK,相反,它推迟发送,以便将ACK与需要沿该方向发送的数据一起发送,时延为200ms,超过时延范围,发送确认. 2.nagle算法: 一个TCP连接 ...

  4. 【Android应用开发】 推送原理解析 极光推送使用详解 (零基础精通推送)

    作者 : octopus_truth 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/45046283 推送技术产生场景 : -- ...

  5. Java正则表达式小记

    http://blog.csdn.net/pipisorry/article/details/51059500 正则表达式的一般规则都一样,见[python正则表达式] java正则表达式中的特殊字符 ...

  6. JSP标签JSTL（5）--常用的标签函数

    在使用JSTL的标签函数的时候请务必加上如下代码 <!-- 添加jsp标签的核心库 --> <%@ taglib uri="http://java.sun.com/jsp/ ...

  7. 从websphere6.1迁移到weblogic10.3的问题总结

     系统采用war包的方式部署. 问题一: ####<2011-3-29 下午05时17分43秒 CST> <Info> <ServletContext-/MIS-be ...

  8. JAVA之旅（二十一）——泛型的概述以及使用，泛型类，泛型方法，静态泛型方法，泛型接口，泛型限定，通配符

    JAVA之旅(二十一)--泛型的概述以及使用,泛型类,泛型方法,静态泛型方法,泛型接口,泛型限定,通配符 不知不觉JAVA之旅已经写到21篇了,不得不感叹当初自己坚持要重学一遍JAVA的信念,中途也算 ...

  9. Chapter 2 User Authentication, Authorization, and Security（9）：防止登录名和用户查看元数据

    原文出处:http://blog.csdn.net/dba_huangzj/article/details/39003679,专题目录:http://blog.csdn.net/dba_huangzj ...

  10. java 运行环境

    1.jre和jdk的区别 jre:java runtime environment, java运行环境,是java程序运行依赖的,包括java的类库的.class文件和kvm. jdk:java de ...