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

不，:before无法实现。

您的规则都是样式相同的 :before元素，因此您的第二个元素会覆盖第一个元素（实际上您会获得“Bugfix Some Info Text”）。

我试过了，遗憾的是something:before:before不起作用。

我认为你只需要在标记中添加一些小的跨度来保存那些“标签”，伪元素将不适用于此。

Answer 2

首先，如果你想操纵元素内容，我建议使用Javascript而不是CSS。与CSS一样，Javascript由用户的浏览器进行评估，因此它允许您使用元素进行操作。与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之前使用两个前面的部分，这里有一个解决方法：

<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/

Answer 3

价值分配存在错误。使用:代替=。

然后它正在工作.3

.feature:before {
   content:"Feature: "; // Instead of = use :
}


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

这是一个有效的fiddle，但请注意，您无法在网站上搜索单词Bugfix，因为该内容不是可选择的文字。

Answer 4

您还可以为内容添加一些特殊字符。

在这里，查看Introduction to CSS escape sequences

CSS3将内容附加到伪元素

4 个答案: