使用CSS插入文本

我对CSS比较陌生，用它来改变文本的样式和格式。

我现在想用它来插入如下所示的文本:

<span class="OwnerJoe">reconcile all entries</span>

我希望我能把它表示为:

Joe的任务:调和所有条目

也就是说，仅仅由于属于“Owner Joe”类，我希望显示文本Joe's Task:。

我可以用如下代码来实现:

<span class="OwnerJoe">Joe's Task:</span> reconcile all entries.

但是同时指定类和文本似乎太多余了。

有可能做到我想要的吗?

一个想法是尝试将其设置为ListItem <li>，其中“子弹”是文本“Joe’s Task”。我看到了如何设置各种子弹样式，甚至为子弹设置图像的例子。是否可以使用一小块文本作为列表子弹?

523978 次浏览
小开
最佳答案

是的，但是需要支持CSS2的浏览器(所有主流浏览器，IE8+)。

.OwnerJoe:before {
content: "Joe's Task: ";
}

但我更推荐使用Javascript。jQuery:

$('.OwnerJoe').each(function() {
$(this).before($('<span>').text("Joe's Task: "));
});
小开

还可以查看CSS内容属性的attr()函数。它将元素的给定属性输出为文本节点。像这样使用它:

<div class="Owner Joe" />


div:before {
content: attr(class);
}

或者使用新的HTML5自定义数据属性:

<div data-employeename="Owner Joe" />


div:before {
content: attr(data-employeename);
}
小开

每个人都喜欢使用jQuery的答案有一个重大缺陷，那就是它是不可伸缩的(至少在编写时是这样)。我认为马丁汉森有正确的想法，这是使用HTML5 data-*属性。你甚至可以正确使用撇号:

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:

div.task:before { content: attr(data-task-owner)"'s task - " ; }
div.task[data-apos]:before { content: attr(data-task-owner)"' task - " ; }

输出:

Joe's task - mop kitchen
Charles' task - vacuum hallway
小开

就像这样编码:

    .OwnerJoe {
//other things here
&:before{
content: "Joe's Task: ";
}
}
小开

我知道这是一个老问题，但我想更新CSS3的答案。问题是伪类还是伪元素。

CSS2的方式 (伪类)

    .OwnerJoe:before {
content: "Joe's Task:";
}

__abc0 (__abc1) __abc2

    .OwnerJoe::before {
content: "Joe's Task:";
}

提交答案