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

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>

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

a:after {
    content:attr(title);
    color:#f00;
}

CSS3 生成内容

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 71. CSS3 生成内容

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们