#学习记录#——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属性,让我们可以通 ...
随机推荐
- 《剑指offer》树的子结构
一.题目描述 输入两颗二叉树A,B,判断B是不是A的子结构. 二.输入描述 输入两棵树A,B. 三.输出描述 判断B是不是A的子结构,是返回true,否则返回false. 四.牛客网提供的框架 /* ...
- Linux-TCP/IP, IPv4地址类别摘要
TCP/IP分层: application layer transport layer internet ...
- php重新编译，gd扩展支持jpeg文件
晚上写东西的时候,报了一个错误: Call to undefined function imagecreatefromjpeg() 没有开启 jpeg 支持?原来是默认安装的 gd 扩展默认不支持 j ...
- Git 如何把master的内容更新到分支
Background: 当有人对master进行更新之后,你想让已经创建的分支内容更新到master的最新状态, bpan@5CG7022BM2 MINGW64 /d/GitRep/JIRA_Exte ...
- COGS——T1310. [HAOI2006]聪明的猴子
http://cogs.pro/cogs/problem/problem.php?pid=1310 ★ 输入文件:monkey.in 输出文件:monkey.out 简单对比时间限制:1 ...
- 洛谷 P2440 木材加工
P2440 木材加工 题目背景 要保护环境 题目描述 题目描述: 木材厂有一些原木,现在想把这些木头切割成一些长度相同的小段木头(木头有可能有 剩余),需要得到的小段的数目是给定的.当然,我们希望得到 ...
- leetCode 36.Valid Sudoku(有效的数独) 解题思路和方法
Valid Sudoku Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku bo ...
- php实现简单算法2
php实现简单算法2 去弄php手册,里面有数据结构,有数据结构就好办了,我的算法基础那么好. 而且的话有数据结构的话再配合我脑中的那些算法了,我就都ok啦. 在手册里面搜索php数据结构就好 路径如 ...
- 78.Nodejs基础中间件Connect
转自:https://www.cnblogs.com/chris-oil/p/5625437.html 前言 “中间件”在软件领域是一个非常广的概念,除操作系统的软件都可以称为中间件,比如,消息中间件 ...
- axure母版使用实例之百度门户
1.首先构建页面基本结构 2.新建母板 3.将母板应用于各个页面 4.在母板中隐藏聚焦背景及下拉二级菜单 5.在母板中添加事件:打开相应界面.显示/隐藏二级菜单 5.设置页面加载效果:给点击的一级菜单 ...