CSS가 해당 클래스만 사용하여 요소 앞에 텍스트를 동적으로 삽입할 수 있나요?

CSS로 텍스트 삽입: 가이드

CSS 초보자에게 텍스트 서식과 스타일을 조작하는 것은 친숙한 개념입니다. 그러나 때때로 CSS를 사용하여 동적으로 텍스트를 삽입하는 것과 같은 문제에 직면할 수 있습니다. 다음 시나리오를 고려해보세요.

"OwnerJoe" 클래스가 있는 요소 앞에 "Joe's Task:" 텍스트를 삽입하려고 합니다. 이상적으로는 요소 내의 텍스트를 명시적으로 정의하지 않고 요소의 클래스만 사용하여 이를 달성하는 것을 선호합니다.

옵션 탐색

처음에는 다음을 사용할 수 있습니다. 요소 내의 텍스트를 직접 포함:

<span>

그러나 이 접근 방식은 클래스와 클래스를 모두 명시적으로 지정하므로 중복된 것처럼 보입니다.

:before 활용

CSS2에서는 요소 앞에 콘텐츠를 삽입할 수 있는 :before 가상 클래스를 도입했습니다. 이를 사용하면 다음과 같이 목표를 달성할 수 있습니다.

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

이 규칙을 적용하면 "OwnerJoe" 클래스가 있는 요소가 발견될 때마다 "Joe's Task: "라는 텍스트가 그 앞에 표시됩니다.

대체: JavaScript

또는 다음을 사용할 수 있습니다. 이 작업을 위한 JavaScript. jQuery를 활용하면 다음 코드를 구현할 수 있습니다.

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

이 코드는 "OwnerJoe" 클래스가 있는 모든 요소를 ​​반복하고 JavaScript를 사용하여 "Joe's Task: " 텍스트를 삽입합니다.

위 내용은 CSS가 해당 클래스만 사용하여 요소 앞에 텍스트를 동적으로 삽입할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!