css3-------:before和:after的作用
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的作用的更多相关文章
- [转载]css3属性box-sizing:border-box的作用
http://jastate.com/css3-properties-box-sizingborder-box.html 定义和用法 按照w3c school的说法,box-sizing:border ...
- CSS3中box-sizing属性的作用以及应用场景
盒模型box-sizing: 取值 1.content-box 默认值,标准盒模型,设置宽度为内容宽度,实际宽度为左右边距加上左右边框加上左右填充再加上内容宽度 2.border-box 设置宽度等于 ...
- css3新增属性API
写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz- 主要是firefox火狐 -webikt-主要是chr ...
- 《CSS3秘籍》(第三版)-读书笔记
第3章 选择器:明确设置哪些样式 每个样式(或者规则)由两个主要部分组成:选择器是告诉浏览器要格式化什么内容:声明块则列出浏览器用来给选择器定义样式的格式化指令. 1.标签选择器:整体控制 标签选择器 ...
- css3动画 bug 2点
1. .myanimate{ transition-property: left;transition-duration: .3s;transition-timing-function: ease } ...
- css3动画 bug
1. .myanimate{ transition-property: left;transition-duration: .3s;transition-timing-function: ease } ...
- Css3中的响应式布局的应用
Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css" rel= ...
- 前端页面开发,最低兼容IE 8的多设备跨平台问题解决!
项目要求: 网站能够使用PC.ipad.mobile phone正常访问 页面PSD版式宽度分别为1024px和750px 参考资料 使用CSS3 Media Queries,其作用就是允许添加表达式 ...
- css知识点积累
关于样式的优先级问题: !important > style > [ id > class > tag ]; z-index 的属性用法: z-index属性是用来设置元素的 ...
- bootstrap实战教程
bootstrap实战教程 bootstrap介绍 简介 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.全球数以百万计的网站都是 ...
随机推荐
- Linux2.6 --系统调用处理程序
用户空间的程序无法直接执行内核代码.它们不能直接调用内核空间中的函数,因为内核驻留在受保护的地址空间上.如果进程可以直接在内核的地址空间上读写的话,系统的安全性和稳定性将不复存在. ...
- Ext JS 6开发实例(四) :调整主视图
上文把主界面设置好,但是主视图因为界面的微调出现了显示问题,本文将把它调整好了. 打开app/view/main/Main.js,可以看到主视图是派生于标签面板(Ext.tab.Panel)的.在视图 ...
- Android初级教程启动定时器详解
本案例知识是:后台执行定时任务. Alarm机制: 一.创建LongRunningService类 package com.example.servicebestpractice; import ja ...
- 【嵌入式开发】 ARM 汇编 (指令分类 | 伪指令 | 协处理器访问指令)
作者 : 韩曙亮 博客地址 : http://blog.csdn.net/shulianghan/article/details/42408137 转载请著名出处 本博客相关文档下载 : -- AR ...
- Oracle EBS R12多组织(多OU)访问架构
Oracle EBS R12多组织访问架构 多组织架构实现了经营单位(OU)的数据安全性,在底层数据表中有一列ORG_ID来记录数据所属的经营单一,所有多OU的基表都是以"_ALL" ...
- Net和Java基于zipkin的全链路追踪
在各大厂分布式链路跟踪系统架构对比 中已经介绍了几大框架的对比,如果想用免费的可以用zipkin和pinpoint还有一个忘了介绍:SkyWalking,具体介绍可参考:https://github. ...
- 经过一段的努力,终于成为CSDN博客专家,感谢大家支持
感谢CSDN提供这么好的一个技术学习平台,通过各路大神的博客我成长了许多,同时也感谢支持我的朋友们,我会继续努力,用心去写好博客.还请继续关注我~ 谢谢!
- 小强的HTML5移动开发之路(4)——CSS2和CSS3
来自:http://blog.csdn.net/dawanganban/article/details/17653149 在上一篇中我们提到学习HTML5要具备CSS的知识,在页面设计的时候HTML5 ...
- Android Support Design 控件 FloatingActionButton
经常刚可以看到悬浮控件,比如印象笔记的下面那个绿色的悬浮按钮,这个控件非常简单也是来自Design Support Library中同理需要在android studio中加入依赖库:design库 ...
- 新书《Ext JS 4.2 实战》终于出炉了
在清华大学出版社网站看到了书籍信息了,具体地址是:http://www.tup.tsinghua.edu.cn/book/Showbook.asp?CPBH=056140-01&DJ=51 预 ...