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. 05 Activity 跳转传值

    第一个Activity: package com.fmyboke; import java.io.Serializable; import java.util.ArrayList; import ja ...

  2. Android初级教程短信防火墙

    如果你有女神,而且有情敌的话,你看到这篇文章会有一种窃喜的感觉. 需求:对情敌的号码进行拦截,让女神手机永远收不到它的号码. 首先定义一个广播接收者类: package com.example.sms ...

  3. 【一天一道LeetCode】#89. Gray Code

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 The gra ...

  4. HTML5 Web Storage 特性

    原文地址: Using HTML5 Web Storage 原文日期: 2010年06月28日 翻译日期: 2013年08月12日 当下Web开发领域最火爆的词语当属 HTML5.HTML5标准的新特 ...

  5. CUDA Cuts: Fast Graph Cuts on the GPU

    原文出处: http://lincccc.blogspot.tw/2011/03/cuda-cuts-fast-graph-cuts-on-gpu_03.html 现在需要代理才能访问,所以就转载了. ...

  6. mysql进阶(十四) 批量更新与批量更新多条记录的不同值实现方法

    mysql 批量更新与批量更新多条记录的不同值实现方法 在mysql中批量更新我们可能使用update,replace into来操作,下面详细介绍mysql批量更新与性能. 批量更新 mysql更新 ...

  7. Rest api简介

    理解和使用内容协商 我们的开发者在发送一个 REST API 请求的同时,根据应用场景,针对相同的资源,可能会期待不同的返回形式. 比如,我希望根据用户客户端语言,同一个资源的内容可以返回不同的语言. ...

  8. JUnit4快速入门

    JUnit最佳实践 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 public class CardServiceTest {     /**      * 最佳 ...

  9. akamai：与看视频广告等待相比，用户更不能忍受缓冲等待

    根据akamai的研究,网络视频广告的位置对于完成率的影响最大,间插广告的完成率比前贴片广告要高18.1%,而前贴片广告比后贴片广告的完成率要高14.3%. 网站的重复访客的视频广告观看完成率比一时兴 ...

  10. Shell编程入门(第二版)(下)

    ... ... command n done #select把关键字中的每一项做成类似表单,以交互的方式执行do和done之间的命令 示例-select.sh [python] view plainc ...