html - CSS3 将内容附加到伪元素

Question

在语法上是否可以将内容添加到 before/after 元素。

CSS:

.feature:before {
  content: "Feature ";
}


.bugfix:before {
  content: "Bugfix ";
}

HTML:

<li class="feature bugfix">
   Some Info Text
</li>

这将产生一个“Feature Some Info Text”。或者什么是更好的方法？

Answer 1

首先，如果你想操作元素内容，我推荐Javascript而不是CSS。 Javascript 与 CSS 一样，由用户的浏览器评估，因此它允许您对元素进行操作。与 CSS 不同，JS 是一种脚本语言，因此它允许您以编程方式描述您想要的内容。

例如，这是您在问题中所做的 JS 代码:

var elem = document.getElementsByClassName('featured')[0];
var content = elem.innerHTML;
elem.innerHTML='Featured: '+content;

这是你可以用 javascript 做的:

//This code checks if there are any content in the element
//and if not, politely says there are no featured elments
var elem = document.getElementsByClassName('featured')[0];
var content = elem.innerHTML;
if(content)
{
    elem.innerHTML='Featured: '+content;
}
else
{
    elem.innerHTML='No featured items :(';
}

这里有一些关于 javascript 的更多信息:http://www.w3schools.com/js/js_htmldom.asp

您可以使用 jquery(一个 javascript 库)和 JS 来获得更多人类可读(和可写)的代码。

这是您在问题中所做的 jquery 代码示例:

$('.featured').before('Featured: ');

这是您可以执行的 jquery 代码示例:

//This code puts an index in front of all the featured items.
$('.featured').each(function(index){
    $(this).prepend((index+1)+'.');
});

还有一些关于 jquery 的信息:http://www.w3schools.com/jquery/default.asp

另一方面，如果您正在寻找 CSS 来操纵元素内容的方法，那么在首选元素之后或之前拥有一个新的类似元素的结构就可以了。您可以像元素一样设置该结构的样式，仅此而已。

您可能也对有关此主题的更多信息感兴趣:http://css-tricks.com/css-content/

编辑:

如果您只想通过 CSS 同时使用两个 before 部分，这里有一个解决方法:

<style>
    .bugfix:before
    {
        content:'Bugfix! ';
    }
    .featured:before
    {
        content:'Featured: ';
    }
</style>
<div class="bugfix">
    <div class="featured">Some content</div>
</div>

这是结果:http://jsfiddle.net/BY4ec/1/