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