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. 详解EBS接口开发之销售订单导入

     步骤 1. 创建一个订单导入来源.       - 导航到 OM -> 设置 -> 订单 -> 导入来源       - 输入一个新的订单导入来源名称和描述 - 选择启用来激活 ...

  2. reactor线程阻塞引起故障

    大致线程模型: jstack打印JVM堆栈,可以看到reactor线程阻塞了,导致它对应的前端连接无法使用.阻塞在了oracle驱动rollback动作,这里其实是因为oracle驱动为了保证串行请求 ...

  3. Java基础--Java---IO流------GUI(布局)、Frame、事件监听机制、窗体事件、Action事件、鼠标事件、对话框Dialog、键盘事件、菜单

     * 创建图形化界面  * 1.创建frame窗体  * 2.对窗体进行基本设置  *   比如大小.位置.布局  * 3.定义组件  * 4.将组件通过窗体的add方法添加到窗体  * 5.让窗体显 ...

  4. Python与JavaWeb的第一次碰撞

    在Python中向服务器提交一个表单数据看起来是很容易的,但是这次经历着实让我记忆深刻,借此也为了警醒同样遇到了这样问题的你们. 要做什么? 使用Python的urllib2模块提交表单数据,并在服务 ...

  5. Activity简单几步支持向右滑动返回

    向右滑动返回,对于屏幕过大的手机来说,在单手操作时,是一个不错的用户体验,用户不必再费力的或者用另一个手去点击屏幕左上角的返回按钮或者,手机右下角的返回按钮,轻轻向右滑动屏幕即可返回上一页,这个功能如 ...

  6. Android开发学习之路--百度地图之初体验

    手机都有gps和网络,通过gps或者网络可以定位到自己,然后通过百度,腾讯啊之类的地图可以显示我们的地理位置.这里学习下百度地图的使用.首先就是要申请开发者了,这个详细就不多讲了.http://dev ...

  7. Android开发学习之路--UI之基本布局

    上一篇文章中主要介绍了ui的控件,这里就学习下布局吧.android的基本布局在layout下主要如图: 从上图可以看出有FrameLayout(单帧布局),LinearLayout(线性布局),Ta ...

  8. Android之Gallery和Spinner-Android学习之旅（二十九）

    Spinner简介 spinner是竖直方向展开一个列表供选择.和gallery都是继承了AbsSpinner,AbsSpinner继承了AdapterView,因此AdaptyerView的属性都可 ...

  9. Hessian源码分析--HessianProxyFactory

    HessianProxyFactory是HessianProxy的工厂类,其通过HessianProxy来生成代理类. 如下面代码: HessianProxyFactory factory = new ...

  10. linux后台运行程序（secureCRT断掉或关闭后继续运行程序）

    secureCRT断掉后想继续运行程序.也就是程序会在后台一直执行到结束. secureCRT通过ssh联接到client端运行程序,如果关掉窗口或者断开连接时,任务会被kill. 为了程序能够后台执 ...