使用CSS插入文字我是CSS的新手，并使用它來更改文本的樣式和格式。我現(xiàn)在想用它來插入文本，如下所示：<span class="OwnerJoe">reconcile all entries</span>我希望我能表現(xiàn)為：喬的任務(wù)：協(xié)調(diào)所有條目即，僅由于屬于“所有者Joe”類，我希望Joe's Task:顯示文本。我可以用類似的代碼來做到這一點(diǎn)：<span class="OwnerJoe">Joe's Task:</span> reconcile all entries.但這對(duì)于指定類和文本來說似乎是多余的。有可能做我想要的嗎？編輯 一個(gè)想法是嘗試將其設(shè)置為ListItem <li>，其中“項(xiàng)目符號(hào)”是文本“ Joe's Task”。我看到了如何設(shè)置各種項(xiàng)目符號(hào)樣式甚至項(xiàng)目符號(hào)圖像的示例。列表項(xiàng)目符號(hào)可以使用一小段文字嗎？
4 回答
四季花海
TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超5個(gè)贊
它是，但是需要具有CSS2功能的瀏覽器（所有主要瀏覽器，IE8 +）。
.OwnerJoe:before {
content: "Joe's Task:";
}
但我寧愿為此使用Javascript。使用jQuery：
$('.OwnerJoe').each(function() {
$(this).before($('<span>').text("Joe's Task: "));
});
qq_花開花謝_0
TA貢獻(xiàn)1835條經(jīng)驗(yàn) 獲得超7個(gè)贊
每個(gè)人似乎都喜歡使用jQuery的答案有一個(gè)主要缺陷，那就是它不可擴(kuò)展（至少在編寫時(shí)如此）。我認(rèn)為Martin Hansen有正確的想法，那就是使用HTML5 data-*屬性。您甚至可以正確使用撇號(hào)：
的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
胡說叔叔
TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超8個(gè)贊
還要檢查CSS content屬性的attr（）函數(shù)。它將元素的給定屬性輸出為文本節(jié)點(diǎn)。像這樣使用它：
<div class="Owner Joe" />
div:before {
content: attr(class);
}
甚至使用新的HTML5自定義數(shù)據(jù)屬性：
<div data-employeename="Owner Joe" />
div:before {
content: attr(data-employeename);
}
絕地?zé)o雙
TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超4個(gè)贊
像這樣編碼：
.OwnerJoe {
//other things here
&:before{
content: "Joe's Task: ";
}
}
添加回答
舉報(bào)
0/150
提交
取消