“内容：”的各种可能的用途CSS2/CSS3 中的属性

发布于 2024-10-23 12:55:40 字数 801 浏览 4 评论 0原文

我试图找到一些关于 css 中 content: 属性的各种可能用途的最新信息，但只能在 2004 年左右的网络古代地下城中找到一些东西，所以我想我必须在又是 2011 年：

p:before {
content: url(dingdong.png);
}

p:before {
content: "some text ";
}

我对 :before 选择器和 content: 属性都很陌生，并且在这个问题上偶然听说了它，这个问题得到了非常有创意的回答可爱的女士：

如何通过 CSS 在 UL/LI html 列表中设置项目符号颜色，而不使用任何图像或 span 标签

只是发现内容的实际编码可能会出现一些问题：

li：之前{内容：“■”; 还有

因此，我的具体问题是：除了 url() 和 "text" 之外，还有其他可能性吗？
非常感谢您的建议和想法。

原文

I'm trying to find some uptodate info about various possible uses for content: property in css but only find stuff in the ancients dungeons of the web dating from 2004 orso so I thought I have to ask this in 2011 again:

p:before {
content: url(dingdong.png);
}

p:before {
content: "some text ";
}

I'm very new to both the :before selector as well as the content: property and heard of it accidentally on this question which was answered very creatively by a lovely lady:

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

Only to find out that some problems might occur concerning the actual encoding of the content:

li:before{ content: "■"; } How to Encode this Special Character as a Bullit in an Email Stationery?

And so my concrete question is: besides url() and "text", are ther other possibilities?
Thanks very much for your suggestions and ideas.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

池予 2024-10-30 12:55:40

哦，太多了，无法一一列举。一些最常见的情况是：

特殊编号，使用 counter() 函数，以及 counter-reset 和 counter-increment 属性
< p>纯CSSclearfix：
<前><代码>.foo:after {
内容： ””;
显示：块；
明确：两者；
}
显示属性，例如打印打印样式表中超链接的URL
```
a[href]:after {
    内容：'('attr(href)')';
}
```
添加不应该出现在 HTML 中的印刷装饰，因为它们是演示性的。例如，在我的博客中，我将其用于帖子或侧边栏链接之间的装饰。

将图标添加到超链接，具体取决于它们指向的位置，例如

a[href^="http://twitter.com/"]:before {
    内容： url('twitter-icon.png');
}

添加指针以制作仅 CSS 的对话气泡：
<前><代码>.bubble {
位置：相对；
背景：银色；
}
.buble:之后{
内容： ””;
边框：10px实心透明；
顶部边框颜色：银色；
位置：绝对；
底部：-20px
}

还有很多很多其他的。

请注意：如果某些内容不是演示性的，它可能应该位于您的 HTML 中。用户将无法选择 CSS 生成的内容，屏幕阅读器将忽略它。

Oh, too many to list. Some of the most common cases are:

Special numbering, with the counter() function, along with the counter-reset and counter-increment properties

Pure CSS clearfix with:

.foo:after {
    content: "";
    display: block;
    clear: both;
}

Display attributes, eg to print URLs for hyperlinks in a print stylesheet
```
a[href]:after {
    content: ' (' attr(href) ') ';
}
```
Add typographic ornaments that shouldn't be in the HTML because they're presentational. For example, in my blog, I've used it for the ornaments between posts or sidebar links.

Add icons to hyperlinks, depending on where they point, like

a[href^="http://twitter.com/"]:before {
    content: url('twitter-icon.png');
}

Adding a pointer to make a CSS-only speech bubble:

.bubble {
    position: relative;
    background: silver;
}

.bubble:after {
    content: "";
    border:10px solid transparent;
    border-top-color:silver;
    position: absolute;
    bottom:-20px
}

And many, many other.

Just beware: If something is not presentational, it should probably be in your HTML. Users will not be able to select CSS generated content, and screen readers will ignore it.

回复收藏 0 原文