DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!
CSS 中的 content
属性与伪元素 ::before
和 ::after
结合使用。它用于字面插入内容。它可以有四种值类型。
字符串
.name::before {
content: "Name: ";
}
然后像这样的元素
<div class="name">Chris</div>
将呈现为这样
Name: Chris
它也可以是空字符串,这在诸如 clearfix 之类的东西中很常见。
计数器
div::before {
content: counter(my-counter);
}
图像
div::before {
content: url(image.jpg);
}
这实际上是页面上的一个图像,就像
一样。它也可以是渐变。请注意,以这种方式插入时,您无法更改图像的尺寸。您还可以通过对内容使用空字符串来插入图像,使其以某种方式 display: block
,对其进行大小调整,并使用 background-image
。这样,您可以使用 background-size
调整其大小。
属性
您可以使用直接从 HTML 属性中获取的值(字符串)。
<div data-visual-label="Widget Rating">60</div>
[data-visual-label]::before {
content: attr(data-visual-label) ": ";
}
/* Classic print trick! Show URLs! */
@media (print) {
a[href]::after {
content: " (" attr(href) ") "; /* you could combine a url() in here even if you wanted */
}
}
attr()
函数目前还没有“类型”,因此您不能传递像 20px
这样的值(仅字符串),但总有一天会有的!
替代文本
规范指出,您可以在语法中使用 /
来列出替代文本。例如…
.el::before {
content: "⭐️" / "Alternate Text for that star";
content: "→" / ""; /* Visual only, don't read. */
}
也许您可以像这样使用它…
<ul aria-label="To Do List">
<li>Make Bed</li>
<li data-alt-pseudo="Completed">Grocery Shop</li>
<li>Sweep Driveway</li>
</ul>
[data-alt-pseudo="Completed"]::before {
content: "✅"; /* fallback */
content: "✅" / attr(data-alt-pseudo);
}
更多信息
以这种方式插入的内容实际上不在 DOM 中,因此它有一些限制。例如,您不能直接(仅)将事件附加到伪元素。以这种方式插入的文本是否被屏幕阅读器读取(现在通常是)或是否可以选择它(现在通常不是)也不一致。
浏览器支持
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
4 | 2 | 9 | 12 | 3.1 |
移动/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 2.1 | 3.2 |
对于 Opera,url()
仅在 7 版及更高版本中受支持。
…天哪,蝙蝠侠,你居然可以使用计数器!?就在我以为我已经了解了关于CSS的一切的时候…
如果
attr()
的url
<type-or-unit>
关键字有更广泛的浏览器支持就好了http://jsbin.com/ujeyok/1/edit
确实!我也在等。我们可以用它做很多事情。
确实!我也在等。
一个很好的用途是打印样式表。您可以在链接旁边显示URL。
HTML
CSS
哇,计数器和属性方法真的很强大。到目前为止,我只是使用它来创建特殊元素以添加视觉效果
关于如何使用CSS添加图像并使其宽度为100%并在窗口更改时保持比例,有什么建议吗?我尝试使用带有url的:before,这把我带到了这里,但似乎有点卡住了。
您是否尝试过
background-size: cover
,如本文所示?我们可以将
content: url(image.jpg);
与content: attr(data-image);
结合起来吗?像这样
url(attr(data-image));
我只想提一下,我真的很喜欢你的页面。我可能打算收藏你的网站。你的文章真的很棒。感谢你与我们分享你的博客网站。
“content: url(image.jpg);”在Firefox上效果不佳。
请查看下面的CodePen:http://codepen.io/IgnaciodeNuevo/pen/PqwVQe
我想在右侧的输入框中添加一个星号,就像左侧图像中的那样。
我完全卡住了,而且我居然没看出来,真是愚蠢。
只需在输入元素周围添加一个span并为其赋予星号类,而不是输入元素本身。因为::before + ::after会在元素自身内容之前/之后添加内容,而输入元素没有内容,所以你的示例不起作用。
在评论中没有看到这一点….
光栅图像(png、jpg、gif)不会在:before|:after的内容中缩放,但是SVG会根据框的大小进行缩放。
当然,SVG必须是响应式的。
如果您为其设置“display:block”或“display:inline-block”(或者可能是除“inline”之外的其他一些显示值),则可以。或者,如果您将其浮动或绝对定位。
很酷的东西!
我只想知道如何在content属性中使文本显示为两行或多行,例如
.before { content: “line 1 line 2 line 3”};
然后它将显示为
line 1
line 2
line 3
谢谢
content: “line 1 \a line 2 \a line 3”;应该可以解决问题
\a是“内容”换行符序列。
content: “line 1 \a line 2\a line 3”
\a是“内容”换行符代码
嗨!我无法使用:before更改图像的宽度和高度。你能帮我一下吗?
您可以使用
transform
缩放图像。您可以使用transform缩放图像……抱歉来晚了……