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.

그러나 그것은 클래스와 텍스트를 지정하는 데 끔찍하게 중복되는 것처럼 보입니다.

내가 원하는 것을 할 수 있습니까?

편집 한 아이디어는 <li>"글 머리 기호"가 "Joe 's Task"텍스트 인 ListItem으로 설정하는 것 입니다. 다양한 글 머리 기호 스타일과 글 머리 기호 이미지를 설정하는 방법에 대한 예를 봅니다. 목록 글 머리 기호에 작은 텍스트 블록을 사용할 수 있습니까?

CSS2 가능 브라우저 (모든 주요 브라우저, IE8 +)가 필요합니다.

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

그러나 나는 이것을 위해 자바 스크립트를 사용하는 것이 좋습니다. jQuery로 :

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

모든 사람이 좋아하는 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

CSS content 속성의 attr () 함수도 확인하십시오. 요소의 주어진 속성을 텍스트 노드로 출력합니다. 다음과 같이 사용하십시오.

<div class="Owner Joe" />

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

또는 새로운 HTML5 사용자 정의 데이터 속성으로도 :

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

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

다음과 같이 코딩하십시오.

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