CSS之after与before的content 和 attr 配合使用

`content` 和 `attr` 配合使用

如果你不想把content内容在CSS里写死，那你可以使用attr表达式来从页面元素中动态的获取内容：

/* <div data-line="1"></div> */div[data-line]:after { content: attr(data-line); /* 属性名称上不要加引号！ */
}

attr属性通常和自定义属性data-配合使用，因为传统的其它属性虽然也能存值，但通常不适合存放表达性文字。

`content`里的字符串连接操作

这种字符串连接很像常规编程语言了：

/* <div data-line="1"></div> */div[data-line]:after { content: "[line " attr(data-line) "]";
}

还需要用JavaScript里拼装字符串吗？CSS3里就能完成这些，是不是感觉CSS3可以部分的替代Javascript了！ attr的动态生成页面内容的能力着实是一件让人兴奋的事情。你实际上可以用它配合content对页面的很多其他元素和属性进行操作。

转载于:https://www.cnblogs.com/Joe-and-Joan/p/10238668.html

CSS之after与before的content 和 attr 配合使用相关推荐

CSS中content和attr的用法
content和attr属性用的不是很多,但是它们能在页面下面悄悄的使用CSS来生成内容,下面让我们看看content和attr的用法相互配合产生神奇效果的基本content用法 content属性 ...
CSS小技巧之替换图片(content)
一想到替换图片,我们大部分人可能都会想到用background-image或用两个img元素控制显示隐藏来实现,其实还可以利用css的content属性来替换img中的内容来实现. Part 1 1. ...
【CSS系列】被忽略的content属性
CSS的 content属性,大家应该都不陌生,很多时候我们都使用过,一般情况下你看到最多的用法无外乎这样两种:一种用于清除浮动,一种用于我们经常使用的字体图标. .clear:after {cont ...
精通HTML 第二章使用适当的标签完成任务阅读笔记
通过本章的学习,你将会找到一些演示如何使用无侵入性(unobtrusive)DOM脚本和CSS来充分利用这些语义和结构,以增强网页的功能和样式的示例. 2.1 文档标记 2.1.1 段落.换行和标题 ...
html中after伪类原理,css :after伪类+content使用说明和方法
首先,这段代码中的content: ".";有什么用,解决了什么问题,为什么要用他? content属性用于定义元素之前或之后放置的生成内容.默认地,这往往是行内内容,不过该内容创 ...
CSS 伪元素 content的特殊用法
CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪类选择器中,有一个content属性,能够实现页面中的内容插入. Co ...
CSS中content属性的妙用
前言本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属 ...
CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法
300px!important;width /**/:340px;margin:0 10px 0 10px} ,关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如 ...
html中content属性,CSS3的content属性用法详解
Content属性应该算是使用最常用的一个css属性之一吧,比如我们创建一个聊天气泡.超链接的立体翻转特效.添加图标.都要使用到content属性,当然这个属性要结合:before和:after伪类使 ...

CSS之after与before的content 和 attr 配合使用

`content` 和 `attr` 配合使用

`content`里的字符串连接操作

CSS之after与before的content 和 attr 配合使用相关推荐

最新文章

热门文章

CSS之after与before的content 和 attr 配合使用

content 和 attr 配合使用

content里的字符串连接操作

CSS之after与before的content 和 attr 配合使用相关推荐

最新文章

热门文章

`content` 和 `attr` 配合使用

`content`里的字符串连接操作