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. IDL build

    For Developers‎ > ‎Design Documents‎ > ‎ IDL build 目录 1 Steps 2 GYP 3 Performance 3.1 Details ...

  2. MongoDB 的replicattion 复制集练习

              replicattion 相当于 mysql 的主从复制的读写分离,共同维护相同的数据,提高服务器的可用性[假如主(PRIMARY)不能用时,mongo会迅速自动切到从(SECON ...

  3. nginx的Rewrite重写

        location /{                if ($remote_addr=192.168.1.100){                          //禁止此 ip 访问 ...

  4. WPF模仿QQ登录按钮

    原文:WPF模仿QQ登录按钮 如下图,第一张是未点击时按钮样式,第二张是鼠标划过时按钮样式. 样式代码: <Style TargetType="{x:Type Button}" ...

  5. 【SRM 717 div2 A】 NiceTable

    Problem Statement You are given a vector t that describes a rectangular table of zeroes and ones. Ea ...

  6. ArcGIS api for javascript——放大时切换图层

    描述 本例展示了如何在地图里指出显示的缓存或切片的细节等级(LODs).当打开示例地图,可以看到一些来自ArcGIS Online ESRI_Imagery_World_2D图层的影像.这个应用程序配 ...

  7. 零基础学python-3.3 标识符

    1.标识符的组成 1)有数字.下划线.英文字母组成 2)第一个字符仅仅能是字母或者下划线 3)大写和小写敏感 标识符通常是变量名称.方法名.类名等 2.keyword python里面有一系列的关键字 ...

  8. HackingTeam重磅炸弹: 估值超1000万美金带有军火交易性质的木马病毒以及远控源代码泄露

    [简单介绍] 经常使用网名: 猪头三 出生日期: 1981.XX.XX 个人站点: http://www.x86asm.com QQ交流: 643439947 编程生涯: 2001年~至今[共14年] ...

  9. Lesson 1 Basic Concepts: Part 1

    www.how-to-build-websites.com/basic-concepts/part1.php An introduction to domain names, web servers, ...

  10. Android 5.0(Lollipop)中的SurfaceTexture，TextureView, SurfaceView和GLSurfaceView

    SurfaceView, GLSurfaceView, SurfaceTexture以及TextureView是Android当中名字比较绕,关系又比较密切的几个类.本文基于Android 5.0(L ...