#学习记录#——CSS content 属性
CSS content 属性常结合：before 和：after 这两个伪类一起使用，给指定的元素添加内容来丰富页面。
1. 添加文本内容
html:
<h1>给末尾添加内容。 </h1>
<h2>给末尾不添加内容。 </h2>
css:
<style>
h1::after{
content: " hello world！！"
}
h2::after{
content: none
}
</style>
所要添加的内容用双引号引起来，若不添加内容可使用 属性none
2. 在元素前/后添加图片，url里是图片的路径
CSS：
<style>
h1:: before{
content:url("images/a.jpg");
}
</style>
不过插入的图片不能修改大小
3. 给元素添加属性值，直接利用attr获取元素的属性，将其插入到对应位置。
<style>
a:: after{
content:attr(href)
}
</style> <body>
<a href="http://www.cnblogs.com/olive987/">我的博客</a>
<body>
#学习记录#——CSS content 属性的更多相关文章
- CSS Content 属性
content 属性,用在after,before伪元素上,用于在选中的元素前后插入内容. 插入的内容多种多样, 纯文字 h1::after{ content:"h1后插入内容" ...
- 1+x证书学习日志——css常用属性
## css常用属性: 1:文本属性: 文本大小: font-size:18px; 文本颜色 colo ...
- css content属性
content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容. 用于定义元素之前或之后放置的生成内容.默认地,这往往是行内内容,不过该内容创建的框类型可以用属性 displ ...
- Spring Boot学习记录03_一些属性配置文件
转自:http://blog.didispace.com/springbootproperties/ 多环境配置(这个地方跟maven的profile配置有点类似) 我们在开发Spring Boot应 ...
- [20190618]日常学习记录(二)-flex属性及vue实战
早上在看flex属性,总结一下它的优缺点 为什么使用flex, 她和浮动相比,代码更少.浮动要考虑左浮动右浮动,有时还要去清除浮动.flex一行代码就搞定了. 她更灵活,实现平均分配,根据内容大小分配 ...
- 知道css有个content属性吗？有什么作用？有什么应用？
css的content属性专门应用在 before/after 伪元素上,用来插入生成内容.最常见的应用是利用伪类清除浮动. //一种常见利用伪类清除浮动的代码 .clearfix:after { c ...
- CSS content换行技术实现字符animation loading效果
一.之前我的字符loading实现 关于字符打点动画实现,我之前使用过box-shadow模拟,还有border+background模拟,还有使用text-shadow实现,以及今年自认为是最好的实 ...
- HTML与CSS学习记录
title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML ...
- CSS魔法堂：一起玩透伪元素和Content属性
前言 继上篇<CSS魔法堂:稍稍深入伪类选择器>记录完伪类后,我自然而然要向伪元素伸出"魔掌"的啦^_^.本文讲讲述伪元素以及功能强大的Contet属性,让我们可以通 ...
随机推荐
- ipad mini2 升级9.0.2后解锁白屏解决
解锁白屏是个什么现象?就是当你用手指滑动解锁后出现输入密码的界面后,1秒之内屏幕变白,中间一个黑色的苹果,几秒之后重新回到滑动解锁的界面.我出现这个现象不是因为升级了9.0.2,而是升级了9.0.2之 ...
- GoldenGate 双向复制解决方案
1 双向复制方案简介 在双向复制(Bidirectional)方案中,可以采用以下两种部署方式: 方式一:配置源和目标数据库可以同时保持Active 状态,同时进行应用系统的事务处理, 此时需由应用系 ...
- iOS ReactiveCocoa 最全常用API整理（可做为手册查询）
本文适合有一定RAC基础的童鞋做不时的查询,所以本文不做详细解释. 一.常见类 1.RACSiganl 信号类. RACEmptySignal :空信号,用来实现 RACSignal 的 +empty ...
- 用VUE做网站后台
介绍: 这是一个用vuejs2.0和element搭建的后台管理界面. 相关技术: vuejs2.0:渐进式JavaScript框架,易用.灵活.高效,似乎任何规模的应用都适用. element:基于 ...
- 关于git及其github的使用
一:序言(就是瞎扯) 人们都说不会使用git和github的程序员都不是好程序员,是的,当我第一次听到的时候有点失望.因为我也不会...但是这句话激起了我学习使用git的动力(其实也没怎么深入的学习) ...
- hiho 1055 刷油漆 树形dp
一个简单的树上的背包问题. 代码: #include <iostream> #include <cstdio> #include <cstring> #includ ...
- ArcGIS api for javascript——显示地图属性
描述 本例展示了如哦读取地图和图层的属性和返回信息给用户.本例中的四个按钮允许用户接收地图属性.每个按钮调用不同的函数. ·Get All Map Layers - 这个按钮调用getMapLayer ...
- [Recompose] Stream Props to React Children with RxJS
You can decouple the parent stream Component from the mapped React Component by using props.children ...
- Redis之创建
redis配置文件信息 public sealed class RedisConfigInfo { /// <summary> /// 可写的Redis链接地址 /// format:ip ...
- android文本排布
首先看一幅图,是简书App的一篇文章的截图,如下: 图1,图2 上面两个图片都是文本的显示,但是由于有多种格式,所以较为复杂,例如其中有普通文本,还有加粗的文本,还有图文混排的显示等等. 一.解析HT ...