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. ROS_Kinetic_22 使用ROS的qt插件即ros_qtc_plugin实现Hi ROS!!!!

    官网已经更新了教程说明,在此特别说明: https://github.com/ros-industrial/ros_qtc_plugin/wiki This wiki explains the pro ...

  2. 如何在Cocos2D游戏中实现A*寻路算法(七)

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...

  3. 【OpenCV文档】用于角点检测的Fast算法

    原文地址:http://docs.opencv.org/trunk/doc/py_tutorials/py_feature2d/py_fast/py_fast.html#fast-algorithm- ...

  4. eclipse如何正确部署tomcat7

    eclipse如何正确部署tomcat7 单独运行apache-tomcat-7.0.65(startup.bat)后,在浏览器输入  http://localhost:8080  可以正常出现tom ...

  5. JSP编译成Servlet（一）语法树的生成——语法解析

    一般来说,语句按一定规则进行推导后会形成一个语法树,这种树状结构有利于对语句结构层次的描述.同样Jasper对JSP语法解析后也会生成一棵树,这棵树各个节点包含了不同的信息,但对于JSP来说解析后的语 ...

  6. [java]负数的二进制编码——越是基础的越是要掌握

     ),第二位代表有几个10(即几个101),第三位代表有几个100(即有几个102)-,用小学课本上的说法就是:个位上的数表示几个1,十位上的数表示向个10,百位上的数表示几个100-- 同理可证 ...

  7. Android高级控件（五）——如何打造一个企业级应用对话列表,以QQ，微信为例

    Android高级控件(五)--如何打造一个企业级应用对话列表,以QQ,微信为例 看标题这么高大上,实际上,还是运用我么拿到listview去扩展,我们讲什么呢,就是研究一下QQ,微信的这种对话列表, ...

  8. MPLSVPN 命令集

      载请标明出处:http://blog.csdn.net/sk719887916,作者:skay 读懂下面配置命令需要有一定的TCP/IP,路由协议基础,现在直接上关键VPN命令. router ...

  9. 干掉头疼的finished with non-zero exit value 2

    很多次会出现 finished with non-zero exit value 2  . Error:Execution failed for task ':app:dexDebug'. > ...

  10. git使用详解

    1. Git概念 1.1. Git库中由三部分组成 Git 仓库就是那个.git 目录,其中存放的是我们所提交的文档索引内容,Git 可基于文档索引内容对其所管理的文档进行内容追踪,从而实现文档的版本 ...