저는 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: ";
}
}