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. 最简单的基于FFmpeg的libswscale的示例（YUV转RGB）

    ===================================================== 最简单的基于FFmpeg的libswscale的示例系列文章列表: 最简单的基于FFmpeg ...

  2. RecyclerView下拉刷新上拉加载（一）

    listview下拉刷新上拉加载扩展(一) http://blog.csdn.net/baiyuliang2013/article/details/50252561 listview下拉刷新上拉加载扩 ...

  3. 05 Activity 回传数据

    当从一个Activity跳转到第二个Activity后然 让其处理完业务逻辑回传数据给第一个Activity: 回传调用方法顺序: onActivityResult--->>onResta ...

  4. 1、Android测试入门

    编写和运行测试时Android APP开发周期中的重要的一环.好的测试可以让你非常容易的在开发过程中发现bug,提升你对自己代码的自信.使用Android Studio,你可以在物理设备或者虚拟机中运 ...

  5. hive编程指南——读书笔记（无知拾遗）

    set hive.metastore.warehouse.dir=/user/myname/hive/warehouse; 用户设定自己的数据仓库目录.不影响其他用户.也在$HOME/.hiverc中 ...

  6. mysql进阶(二十四)防御SQL注入的方法总结

    防御SQL注入的方法总结 这篇文章主要讲解了防御SQL注入的方法,介绍了什么是注入,注入的原因是什么,以及如何防御,需要的朋友可以参考下. SQL注入是一类危害极大的攻击形式.虽然危害很大,但是防御却 ...

  7. 【一天一道LeetCode】#105. Construct Binary Tree from Preorder and Inorder Traversal

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

  8. ROS(indigo)国外开源示例包括多机器人控制等基于V-Rep和Gazebo的仿真

    ROS(indigo)国外开源示例包括多机器人的V-Rep和Gazebo仿真等 1 micros_swarm_framework 使用超级经典的stage. http://wiki.ros.org/m ...

  9. IDEA中运行DirectKafkaWordCount程序

    1,将SPARK_HOME中的DirectKafkaWordCount程序复制到idea中. 2,由于在KafkaWordCount中已引入相关jar包,此步可略过 3,配置configuration ...

  10. phantomjs的使用+Java代码+依赖js（兼容Linux和windows版本）

    1.  在使用phantomjs的时候需要下载phantomjs,网上有window版本和Linux版本.将phantomjs放在Linux上的指定位置之后(如下面的/home/tpl/phantom ...