Sử dụng CSS để chèn văn bản

Tôi còn khá mới với CSS và đã sử dụng nó để thay đổi kiểu dáng và định dạng của văn bản.

Bây giờ tôi muốn sử dụng nó để chèn văn bản như hình dưới đây:

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

Mà tôi hy vọng tôi có thể hiển thị như:

Nhiệm vụ của Joe: điều hòa tất cả các mục

Đó là, đơn giản nhờ vào đẳng cấp của "Chủ sở hữu Joe", tôi muốn văn bản Joe's Task:được hiển thị.

Tôi có thể làm điều đó với mã như:

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

Nhưng điều đó dường như vô cùng dư thừa để cả hai chỉ định lớp và văn bản.

Có thể làm những gì tôi đang tìm kiếm?

EDIT Một ý tưởng là cố gắng thiết lập nó dưới dạng ListItem <li>trong đó "viên đạn" là văn bản "Nhiệm vụ của Joe". Tôi thấy các ví dụ về cách đặt các kiểu đầu đạn khác nhau và thậm chí cả hình ảnh cho các viên đạn. Có thể sử dụng một khối nhỏ văn bản cho danh sách dấu đầu dòng không?

Đó là, nhưng yêu cầu một trình duyệt có khả năng CSS2 (tất cả các trình duyệt chính, IE8 +).

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

Nhưng tôi muốn khuyên bạn nên sử dụng Javascript cho việc này. Với jQuery:

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

Câu trả lời sử dụng jQuery mà mọi người dường như thích đều có một lỗ hổng lớn, đó là nó không thể mở rộng được (ít nhất là khi nó được viết). Tôi nghĩ Martin Hansen có ý tưởng đúng, đó là sử dụng các data-*thuộc tính HTML5 . Và bạn thậm chí có thể sử dụng dấu nháy đơn một cách chính xác:

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 - " ; }

đầu ra:

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

Ngoài ra kiểm tra hàm attr () của thuộc tính nội dung CSS. Nó xuất ra một thuộc tính đã cho của phần tử dưới dạng nút văn bản. Sử dụng nó như vậy:

<div class="Owner Joe" />

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

Hoặc thậm chí với các thuộc tính dữ liệu tùy chỉnh HTML5 mới:

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

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

Chỉ cần mã nó như thế này:

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