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. 安装meteor运行基本demo发生错误。

    bogon:~ paul$ curl https://install.meteor.com/ | sh % Total % Received % Xferd Average Speed Time Ti ...

  2. <Sicily> Longest Common Subsequence

    一.题目描述 Given a sequence A = < a1, a2, -, am >, let sequence B = < b1, b2, -, bk > be a s ...

  3. EasyUI 之 DataGrid的两种赋值方法

    方法一:使用ViewData赋值 首先,我们创建一个User的实体类 public class User { public string UserID; public string UserName; ...

  4. Leaflet绘制多边形

    drawPolygon = () => { let points = []; const polygon = new L.Polygon(points); this.map.addLayer(p ...

  5. javascript实现多线程 Concurrent.Thread.js

    在这次我的项目中,因为前端要检测硬件加载并识别,再向后台请求发送数据,然后再返回的相应的配置文件!在这过程,要好时好几秒钟,严重影响体验效果,所以在网上靠看的方案,运用多线程去处理,这效果明显改善! ...

  6. luogu P3157 [CQOI2011]动态逆序对（CDQ分治）

    题目描述 对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数.给1到n的一个排列,按照某种顺序依次删除m个元素,你的任务是在每次删除一个元素之前统计整个序列的逆序 ...

  7. CF983E NN country（倍增,差分）

    题意 给定一棵树和若干条路线,每条路线相当于树上 x,y 之间的路径,途径路径上的每个点 给出若干个询问,每次询问从 u 到 v 至少需要利用几条路线 N,M,Q≤200000 题解 构建倍增数组g[ ...

  8. Java 异常的捕获与处理详解（二）

    (一).throws关键字 throws关键字主要是在定义上使用的,表示的是此方法中不进行异常处理,而交给被调用处处理. 例如: class MyMath { public int div(int x ...

  9. HNU 12961 BitTorrent DP

    题意: 你在网上下载东西,一个文件存储在一段或者多段里面,问怎么选择能在规定的流量内下载最多的文件数量.每段的大小一样. 思路: 习惯了做答案保存在DP数组里的题,做这种答案保存在下标里的题,转不过弯 ...

  10. Unity 获得视频的某一帧，生成缩略图

    Unity 并无直接获取视频某一帧图像的API,所以想要生成缩略图就要自己写方法了, 图片和视频都可以用这种方式生成缩略图,另,转载请标明出处,谢谢. using System.Collections ...