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 循环30日

    循环30日的统计 大概格式是 with Date as ( select cast(DATEADD(mm, DATEDIFF(mm,,getdate()), ) as datetime) Date u ...

  2. 使用greenDAO遇到的问题

    前一阵花时间学习了一下greenDAO的使用,这两天已经把项目中之前使用的sqlite数据库操作改用greenDAO,但是在改动的过程中还是出了一些问题,问题主要集中在主键上,下面整理了一下在改动过程 ...

  3. 我照着NancyFx官网的demo来做为什么会有错误呢？？？？

    我照着NancyFx官网的demo来做为什么会有错误呢???? >> csharp这个答案描述的挺清楚的:http://www.goodpm.net/postreply/csharp/10 ...

  4. List<List<model>>如何更快捷的取里面的model？

    访问接口返回数据类型为List<List<model>>,现在想将其中的model插入数据库,感觉一点点循环有点傻,0.0...,各位有没有其他的方法? List<Lis ...

  5. Map<String,String>转换json字符串

    import java.util.HashMap; import java.util.Map; import net.sf.json.JSONObject; public class testJson ...

  6. caffe(1) 网络结构层参数详解

    prototxt文件是caffe的配置文件,用于保存CNN的网络结构和配置信息.prototxt文件有三种,分别是deploy.prototxt,train_val.prototxt和solver.p ...

  7. Java Web Application——servlet

    概述 是一个部署于web服务器中的实现了servlet接口的Java类,用于响应web请求 Web容器(也称为servlet容器)本质上是与servlet交互的Web服务器的组件.Web容器负责管理s ...

  8. python 异步IO

    参考链接:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/00143208573 ...

  9. 紫书 习题 10-15 UVa 12063（数位dp）

    大佬真的强!!https://blog.csdn.net/u014800748/article/details/45225881 #include<cstdio> #include< ...

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

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