CSS 또는 JavaScript를 사용하여 요소 앞에 사용자 정의 텍스트를 삽입하려면 어떻게 해야 합니까?

CSS로 텍스트 삽입 만들기

기본 CSS에서 고급 기술로 전환할 때 텍스트 표현을 향상하는 방법을 찾는 것은 당연합니다. 그러한 과제 중 하나는 클래스 이름을 기반으로 특정 요소 앞에 사용자 정의 텍스트를 삽입하는 것입니다.

CSS를 사용하여 텍스트 삽입

질문에서 "Joe의 작업: " 클래스가 "OwnerJoe"인 텍스트 요소 앞에 있습니다. 전통적으로는 요소 자체 내에 텍스트를 포함할 수 있었습니다.

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

그러나 클래스와 텍스트 콘텐츠를 모두 지정하면 이 방법이 중복됩니다.

귀하의 요구 사항을 해결하기 위해 CSS는 다음을 제공합니다. 해결책:

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

이 규칙은 브라우저가 요소 앞에 지정된 텍스트("Joe's Task: ")를 삽입하도록 지시합니다. "OwnerJoe" 클래스를 사용합니다. 이를 위해서는 CSS2 호환 브라우저가 필요합니다.

대체 접근 방식: JavaScript

CSS가 이 작업을 처리할 수 있지만 JavaScript는 특히 원하는 경우 더욱 간단한 접근 방식을 제공합니다. 동적 텍스트 삽입. jQuery 사용:

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

위 내용은 CSS 또는 JavaScript를 사용하여 요소 앞에 사용자 정의 텍스트를 삽입하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!