CSS Content 属性妙用

简介: CSS Content 属性妙用,你知道吗?

原文作者:CHRIS COYIER

译者:UC 国际研发 Jothy

----

image.png

CSS 中有一个 content 属性,可与 ::before 和 ::after 伪元素搭配使用,来将内容注入到元素中。

下面是一个例子:

image.png

image.png

image.png

该属性通常会获取你传入的所有内容。 但是,也有一些无效值是它不接受的。 我最近听说有人对此感到困惑,所以我自己也玩了一下,并学到了一些东西。

这个正常运行:

image.png

......但这不行:

image.png

我不是很确定为什么,但我猜这是因为 1 是无单位数(即 1 对1px)而不是字符串。 你骗不到浏览器的! 我试着像这样耍了点小聪明:

image.png

你可以从属性中输出数字,就像你所猜测的:
image.png

image.png

但是,当然,你绝不会将生成的内容用于价格等重要信息,对吧?! (请不要这样做。这样不怎么可行,文本也不可行。)

即使你可以获得并显示该数字,它终究只是一个字符串。 你无法真正用它做任何事情。

image.png

image.png

你不能使用数字,期限:

image.png

注意(敲黑板)! 不要像在 PHP 或 JavaScript 中那样尝试拼接字符串:

image.png

规范中有一个东西可以将属性转换为实际类型,而不是把它们当字符串处理......
image.png

image.png

......但我非常确定它还没有在任何地方起作用过。 另外,它也不能帮助我们使用伪元素,因为字符串已经可以这样用了而数字却不行。

通过 email 与我联系的人不理解为什么他们无法对 content 使用 calc()。 我不确定在这种情况下我能帮你做数学运算,但是你值得知道伪元素是可以作为计数器的,并且那些计数器可以做有限的数学运算。 例如,这里是一个从 12 开始的计数器,对于 DOM 中该层级的每个元素递增 -2。

image.png

我们这里没有提到的另一件事是伪元素可以是一张图片。 例如:

image.png

更常见的是使用空字符串作为值(content: "";),它可以执行清除浮动之类的操作,但也可以定位,调整大小以及设置自己的背景。

英文原文:

https://css-tricks.com/valid-css-content/

目录
相关文章
|
3月前
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
|
3月前
|
前端开发
CSS属性:盒子模型
CSS属性:盒子模型
35 0
|
3月前
|
前端开发
CSS属性
CSS属性
32 0
|
1月前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
27 1
|
3月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
49 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
2月前
|
前端开发
CSS 中哪些属性可以继承
在 CSS 中,属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括:文本属性(如 `font-family`, `color`),列表属性(如 `list-style`),表格布局属性(如 `border-collapse`),以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。
|
1月前
|
前端开发
css简写属性
css简写属性
30 0
|
2月前
|
前端开发 JavaScript
如何在CSS中添加自定义属性
如何在CSS中添加自定义属性
16 0
|
2月前
|
前端开发
运用CSS伪类与属性,巧妙实现背景图片旋转效果
运用CSS伪类与属性,巧妙实现背景图片旋转效果
39 0
|
2月前
|
前端开发
哪些 CSS 属性可以继承?
哪些 CSS 属性可以继承?
51 0