#学习记录#——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属性,让我们可以通 ...
随机推荐
- 使用greenDAO遇到的问题
前一阵花时间学习了一下greenDAO的使用,这两天已经把项目中之前使用的sqlite数据库操作改用greenDAO,但是在改动的过程中还是出了一些问题,问题主要集中在主键上,下面整理了一下在改动过程 ...
- [Codeforces 816A]Karen and Morning
题目大意:给你一个时间(hh:mm),求最少经过多少分钟才能使这个时间变成回文. 解题思路:模拟,先判断0的情况,然后每过1分钟判断一次即可. C++ Code: #include<cstdio ...
- [洛谷P2394]yyy loves Chemistry I
题目大意:给你一个实数x($0<x\leq 1$),要你求x/23的值(保留8位小数). 解题思路:此题用double读的精度是不够的,用long double直接读入也会WA,正确做法是“sc ...
- center os 7最小化安装后按table无法补全命令的问题
闲来无趣,这两天huskiesir又重新安装了下center os 7操作系统,结果呢,发现一个问题:按table键无法补全命令啊. 咦,奇怪了,这次怎么回事,完全没遇到过啊.哦,回想了一下,和以往的 ...
- 杯子 (glass)
题目 试题1:杯子 (glass) 源代码:glass.cpp 输入文件:glass.in 输出文件:glass.out 时间限制:1s 空间限制:256MB 题目描述 小明买了N个容积可以 ...
- Apache CXF实战之二 集成Sping与Web容器
本文链接:http://blog.csdn.net/kongxx/article/details/7525481 Apache CXF实战之一 Hello World Web Service 书接上文 ...
- vs2010和qt4.8.4配置
最近项目要求在vs中开发qt程序,安装过后发现代码每天提示功能.由于本人记忆力有限,特在网上收罗了些配置方法. vs安装目录采用默认,qt安装目录:C:\Qt\4.8.4vs 在系统环境变量新建QTD ...
- 会变得ActionBar,让你的ActionBar与众不同
话不多说先看两张图: github地址:https://github.com/Smalinuxer/android-SlideActionBar 原理什么的有时间再讲,或者自行看代码; 兴许还会补充新 ...
- 移动端web app开发备忘
近期要做个手机html5的页面,做些知识储备,重要的点记录下来以备兴许. 1.devicePixelRatio:定义设备物理象素和设备独立象素的比例.css中的px能够看作是设备的独立象素.通过dev ...
- CF 558A(Lala Land and Apple Trees-暴力)
A. Lala Land and Apple Trees time limit per test 1 second memory limit per test 256 megabytes input ...