CSS를 사용하여 텍스트 삽입

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.

하지만 그것은 클래스와 텍스트를 모두 지정하기에는 매우 불필요해 보입니다.

제가 찾고 있는 것을 할 수 있을까요?

EDIT 한 가지 아이디어는 목록 항목으로 설정하는 것입니다.<li>여기서 "총알"은 "Joe's Task" 텍스트입니다.다양한 글머리 기호와 글머리 기호 이미지를 설정하는 방법의 예를 봅니다.목록 게시판에 작은 텍스트 블록을 사용할 수 있습니까?

그렇지만 CSS2 지원 브라우저(모든 주요 브라우저, IE8+)가 필요합니다.

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

하지만 저는 이것을 위해 자바스크립트를 사용하는 것을 추천합니다.jQuery 사용:

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

모두가 좋아하는 것처럼 보이는 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

또한 CSS 콘텐츠 속성의 특성() 함수도 확인하십시오.요소의 지정된 속성을 텍스트 노드로 출력합니다.다음과 같이 사용합니다.

<div class="Owner Joe" />

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

또는 새로운 HTML5 사용자 지정 데이터 속성을 사용하더라도 다음과 같습니다.

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

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

저는 이것이 오래된 질문이라는 것을 알지만, 저는 CSS3에 대한 답변을 업데이트하고 싶습니다.질문은 유사 클래스 또는 유사 요소입니다.

CSS2 way(의사 클래스)

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

CSS3 way (pseudo-element) 이중 콜론 참고

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

다음과 같이 코드화합니다.

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

언급URL : https://stackoverflow.com/questions/2741312/using-css-to-insert-text