css3中content属性的应用
可以使用css3中content功能为html元素增减内容。content需要配合 E:before和E:after使用。
废话少说,看代码和效果说明:
第一种:
css代码:
#div1:before {
content: "你使用的浏览器属性太低。";
}
html代码:
<div id="div1">div</div>
显示效果:

第二种:
css代码:
#div1:after {
content:"我使用的浏览器版本不低呀。";
}
html代码:
<div id="div1">div</div>
浏览器中显示效果:

第三种:
css代码:
#div2 p:before{
content:'第'counter(count)'章:';
}
#div2 p{
counter-increment:count;
}
html代码:
<div id="div2">
<p>生活是很美好的。</p>
<p>生活是很美好的。</p>
<p>生活是很美好的。</p>
<p>生活是很美好的。</p>
<p>生活是很美好的。</p>
<p>生活是很美好的。</p>
<p>生活是很美好的。</p>
</div>
浏览器显示效果:

查看源代码:

css3中content属性的应用的更多相关文章
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- 浅谈CSS3中display属性的Flex布局
浅谈CSS3中display属性的Flex布局 最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...
- 初识 css3中counter属性
最近看到counter属性,好奇是做什么用的,于是去查了查. 1.简单介绍 counter是为css中插入计数器.[注明]在CSS2.1中counter()只能被使用在content属性上.关于浏览器 ...
- CSS3中动画属性transform、transition和animation
Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...
- css3 的content 属性
content属性想必大家都熟悉了,一般结合伪类一起使用,表示显示的内容 例如:.box:before{content:"hello";width:100px;line-heigh ...
- CSS3使用content属性来插入项目编号
首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像,这里我记录的是利用这个content属性来在项目前插入项目编号,同时可以利用content属性在 ...
- CSS3中border-image属性详解
border-images可以说也是CSS3中的重量级属性,如同圆角.边框颜色属性border-color.块阴影属性一样,也是属于边框属性中的一员. 从其字面意思上看,我们可以理解为“边框-图片”, ...
- CSS中content属性的妙用
前言 本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属 ...
- css3中transition属性详解
css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transi ...
随机推荐
- 使用7zip压解各种文件的经常使用命令
7zip简单介绍 格式支持 压缩解压缩 仅支持解压缩 安装 Debian Ubuntu ArchLinux 使用 打包 解压 列出文件的信息列表 检查包的完整性 更新压缩包 删除包里的文件 7zip简 ...
- windows下的两个等待函数
windows下的两个等待技术 第一种: Win32 Sleep()函数 这个函数要求操作系统中止线程动作.直到读过某个指定的时间之后才恢复.能在某个线程结束时(而不是某段时间结束时)被调 ...
- asp.net mvc + javascript生成下载文件
近期做的是对现有项目进行重构.WEB FROM改成MVC,其实也算是推倒重来了. 里面有一个导出功能,将数据输出成txt文件,供下载.原先的做法是有一个隐藏的iframe,在这个iframe的页面中设 ...
- 注册中心Eureka页面添加用户认证
我们需要登录即可访问到Eureka服务,这样其实是不安全的 为Eureka添加用户认证. 第一步,为itcast-microservice-eureka添加安全认证依赖: 第二步,增加applicat ...
- poyla计数问题
关于poyla定理,首先推荐两篇很好的文章阅读 2001-----符文杰<poyla原理及其应用> 2008-----陈瑜希<poyla计数法的应用> 在然后就是自己的学习笔记 ...
- 【转】python文件打开方式详解——a、a+、r+、w+区别
原文地址:http://blog.csdn.net/ztf312/article/details/47259805 第一步 排除文件打开方式错误: r只读,r+读写,不创建 w新建只写,w+新建读写, ...
- (转)C#中数组、ArrayList和List三者的区别
原文地址:http://blog.csdn.net/zhang_xinxiu/article/details/8657431 在C#中数组,ArrayList,List都能够存储一组对象,那么这三者到 ...
- RestTemplate中headers中添加Host不生效
在使用restTemplate访问内网接口时,不打算指host,支持ip访问,所以我们需要再header中指定host.但经调试,发现HttpURLConnection中Host无法覆盖.解决方案: ...
- C#中遍历ArrayList的三种方法(转)
using System; using System.Collections; using System.Linq; using System.Text; namespace ArrayListDem ...
- bzoj 3629: [JLOI2014]聪明的燕姿【线性筛+dfs】
数论+爆搜 详见这位大佬https://blog.csdn.net/eolv99/article/details/39644419 #include<iostream> #include& ...