Html 使用 CSS 插入文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2741312/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using CSS to insert text
提问by abelenky
I'm relatively new to CSS, and have used it to change the style and formatting of text.
我对 CSS 比较陌生，并用它来更改文本的样式和格式。
I would now like to use it to insert text as shown below:
我现在想用它来插入文本，如下所示：
<span class="OwnerJoe">reconcile all entries</span>
Which I hope I could get to show as:
我希望我可以显示为：
Joe's Task: reconcile all entries
乔的任务：协调所有条目
That is, simply by virtue of being of class "Owner Joe", I want the text Joe's Task:to be displayed.
也就是说，仅仅凭借“Owner Joe”类，我希望Joe's Task:显示文本。
I could do it with code like:
我可以用这样的代码来做到这一点：
<span class="OwnerJoe">Joe's Task:</span> reconcile all entries.
But that seems awfully redundant to both specify the class and the text.
但这对于指定类和文本来说似乎是多余的。
Is it possible to do what I'm looking for?
有可能做我正在寻找的吗？
EDITOne idea is to try to set it up as a ListItem <li>where the "bullet" is the text "Joe's Task". I see examples of how to set various bullet-styles and even images for bullets. Is it possible to use a small block of text for the list-bullet?
编辑一个想法是尝试将其设置为 ListItem <li>，其中“项目符号”是文本“Joe's Task”。我看到了如何设置各种项目符号样式甚至项目符号图像的示例。是否可以为列表项目符号使用一小段文本？
回答by Marcel Hymanwerth
It is, but requires a CSS2 capable browser (all major browsers, IE8+).
它是，但需要一个支持 CSS2 的浏览器（所有主要浏览器，IE8+）。
.OwnerJoe:before {
content: "Joe's Task:";
}
But I would rather recommend using Javascript for this. With jQuery:
但我更愿意为此使用 Javascript。使用 jQuery：
$('.OwnerJoe').each(function() {
$(this).before($('<span>').text("Joe's Task: "));
});
回答by Jeff
The answer using jQuery that everyone seems to like has a major flaw, which is it is not scalable (at least as it is written). I think Martin Hansen has the right idea, which is to use HTML5 data-*attributes. And you can even use the apostrophe correctly:
每个人似乎都喜欢使用 jQuery 的答案有一个主要缺陷，那就是它不可扩展（至少在编写时）。我认为 Martin Hansen 的想法是正确的，那就是使用 HTML5data-*属性。您甚至可以正确使用撇号：
html:
html：
<div class="task" data-task-owner="Joe">mop kitchen</div>
<div class="task" data-task-owner="Charles" data-apos="1">vacuum hallway</div>
css:
css：
div.task:before { content: attr(data-task-owner)"'s task - " ; }
div.task[data-apos]:before { content: attr(data-task-owner)"' task - " ; }
output:
输出：
Joe's task - mop kitchen
Charles' task - vacuum hallway
回答by Martin Hansen
Also check out the attr() function of the CSS content attribute. It outputs a given attribute of the element as a text node. Use it like so:
另请查看 CSS 内容属性的 attr() 函数。它将元素的给定属性输出为文本节点。像这样使用它：
<div class="Owner Joe" />
div:before {
content: attr(class);
}
Or even with the new HTML5 custom data attributes:
甚至使用新的 HTML5 自定义数据属性：
<div data-employeename="Owner Joe" />
div:before {
content: attr(data-employeename);
}
回答by BartSabayton
Just code it like this:
只需像这样编码：
.OwnerJoe {
//other things here
&:before{
content: "Joe's Task: ";
}
}
