css2 / css3中“content:”属性的各种可能用法

我正在尝试找到一些有关内容的各种可能用途的最新信息:css中的属性,但只能找到2004年orso的网络古人地牢中的内容,所以我想我必须再次在2011年问这个:
p:before {
content: url(dingdong.png);
}

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

我对以前的选择器以及内容属性都很新,并且在这个问题上偶然听到了这个问题,一位可爱的女士非常有创意地回答了这个问题:

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

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

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

所以我的具体问题是:除了url()和“text”之外,还有其他可能性吗?
非常感谢您的建议和想法.

解决方法

哦,太多了无法列出.一些最常见的案例是:

>特殊编号,带有counter()函数,以及counter-reset和counter-increment属性
>纯CSS clearfix:

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

>显示属性,例如打印打印样式表中超链接的URL

a[href]:after {
    content: ' (' attr(href) ') ';
}

>添加不应该在HTML中的印刷饰品,因为它们是表现性的.例如,在我的blog中,我用它作为帖子或侧边栏链接之间的饰物.
>根据超链接指向的位置添加图标,例如

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

>添加指针以制作仅限CSS的语音气泡:

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

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

还有很多很多其他的.

请注意:如果某些内容不是表现形式,那么它应该在您的HTML中.用户将无法选择CSS生成内容,屏幕阅读器将忽略它.

相关文章

前言 最近项目做完,用户需要兼容IE,于是开展了兼容性的调整工作。边调整边想感叹IE真是个沙雕。。特将...
前言 有些属性不是很常用,但是工作中遇到了,记录一下,方便学习。 1、text-indent text-indent 属性规...
前言 政府网站会遇到公祭日的时候,网站整体颜色变灰的情况。今天正好调了一下。在此把解决方案分享给大...
需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息。 实现过程 书写css...
html代码 css代码 效果图
在一些界面上 , 如果每个icon都去找图片还是相当麻烦的 , 直接使用css画出icon就方便的多了 , 下面两个...