章节
问答
笔记
评论
占位
占位

CSS生成内容

在Web中插入内容,在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”,“:after”和CSS3的伪元素“::before”、“::after”来实现,其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于imginput元素不起作用。

content配合CSS的伪类或者伪元素,一般可以做以下四件事情:

功能

功能说明

none

不生成任何内容

attr

插入标签属性值

url

使用指定的绝对或相对地址插入一个外部资源(图像,声频,视频或浏览器支持的其他任何资源)

string

插入字符串

实例展示:

在CSS中有一种清除浮动的方法叫“clearfix”。而这个“clearfix”方法就中就使用了“content”,只不过只是在这里插入了一个空格。如下所示:

.clearfix:before,

.clearfix:after {

       content:””;

       display:table;

}

.clearfix:after {

       clear:both;

       overflow:hidden;

}

上面这个示例是最常见的,也是最简单的,我们再来看一个插入元素属性值的方法。

假设我们有一个元素:

<a href="##" title="我是一个title属性值,我插在你的后面">我是元素</a>

可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后:

a:after {

  content:attr(title);

       color:#f00;

}

效果如下:

 

任务

在CSS编辑器的第1行输入正确代码,在元素文本内容之前插入文本“我是被插进来的”。

温馨提示:案例的效果如上图所示才算顺利通关,否则请再学习一遍本节的知识点!

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?