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 属性的更多相关文章

  1. CSS Content 属性

    content 属性,用在after,before伪元素上,用于在选中的元素前后插入内容. 插入的内容多种多样, 纯文字 h1::after{ content:"h1后插入内容" ...

  2. 1+x证书学习日志——css常用属性

     ## css常用属性:             1:文本属性:                 文本大小:  font-size:18px;                 文本颜色    colo ...

  3. css content属性

    content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容. 用于定义元素之前或之后放置的生成内容.默认地,这往往是行内内容,不过该内容创建的框类型可以用属性 displ ...

  4. Spring Boot学习记录03_一些属性配置文件

    转自:http://blog.didispace.com/springbootproperties/ 多环境配置(这个地方跟maven的profile配置有点类似) 我们在开发Spring Boot应 ...

  5. [20190618]日常学习记录(二)-flex属性及vue实战

    早上在看flex属性,总结一下它的优缺点 为什么使用flex, 她和浮动相比,代码更少.浮动要考虑左浮动右浮动,有时还要去清除浮动.flex一行代码就搞定了. 她更灵活,实现平均分配,根据内容大小分配 ...

  6. 知道css有个content属性吗？有什么作用？有什么应用？

    css的content属性专门应用在 before/after 伪元素上,用来插入生成内容.最常见的应用是利用伪类清除浮动. //一种常见利用伪类清除浮动的代码 .clearfix:after { c ...

  7. CSS content换行技术实现字符animation loading效果

    一.之前我的字符loading实现 关于字符打点动画实现,我之前使用过box-shadow模拟,还有border+background模拟,还有使用text-shadow实现,以及今年自认为是最好的实 ...

  8. HTML与CSS学习记录

    title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML ...

  9. CSS魔法堂：一起玩透伪元素和Content属性

    前言  继上篇<CSS魔法堂:稍稍深入伪类选择器>记录完伪类后,我自然而然要向伪元素伸出"魔掌"的啦^_^.本文讲讲述伪元素以及功能强大的Contet属性,让我们可以通 ...

随机推荐

  1. sql 的几种常用方法

    第一个项目总结基类:database:主要是定义有关数据库的方法: 1.打开数据库 public static void Open() { ( "server=.\\sqlexpress;d ...

  2. 让IE9以下版本的浏览支持html5,CSS3的插件

    随着html5(后面用h5代表)标签越来越广泛的使用,IE9以下(IE6-IE8)不识别h5标签的问题让人很是烦恼. 在火狐和chrome之类的浏览器中,遇到不认识的标签,只要给个display:bl ...

  3. ivew语法中'${}`的用法

  4. c# 结构 struct

    结构是使用 struct 关键字定义的,与类相似,都表示可以包含数据成员和函数成员的数据结构. 一般情况下,我们很少使用结构,而且很多人也并不建议使用结构,但作为.NET Framework 一般型別 ...

  5. 爬虫--BeautifulSoup使用

    解析库 解析器 使用方法 优势 劣势 Python标准库 BeautifulSoup(markup, "html.parser") Python的内置标准库.执行速度适中 .文档容 ...

  6. 安装Debugging Tools时出现错误Setup could not find the file WinSDK_amd64的处理

    安装Debugging Tools时出现错误Setup could not find the file WinSDK_amd64的处理 1.软件来源:  微软官网下载SDK ISO安装包(含有debu ...

  7. NOIP 2017 小凯的疑惑（同余类）

    题意 给出两个互质的数a,b问最大的不能被xa+yb(x,y>=0)表示的数.(a,b<=109) 题解 NOIPday1T1一道数论题,不知埋葬了多少人的梦想. 用同余类去解释. 我们依 ...

  8. python_webApp

    提高开发效率:当更改代码后,不重启服务器就能使用新效果 参考链接:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df ...

  9. 洛谷 P2015 二叉苹果树 && caioj1107 树形动态规划（TreeDP）2：二叉苹果树

    这道题一开始是按照caioj上面的方法写的 (1)存储二叉树用结构体,记录左儿子和右儿子 (2)把边上的权值转化到点上,离根远的点上 (3)用记忆化搜索,枚举左右节点分别有多少个点,去递归 这种写法有 ...

  10. Codeforces Educational Codeforces Round 8 A. Tennis Tournament

    大致题意: 网球比赛,n个參赛者,每场比赛每位选手b瓶水+裁判1瓶水,所有比赛每一个參赛者p条毛巾 每一轮比赛有2^k个人參加比赛(k为2^k<=n中k的最大值),下一轮晋级人数是本轮每场比赛的 ...