CSS를 사용하여 문자열의 마지막 문자 색상을 변경할 수 있나요?

CSS를 사용하여 문자열의 마지막 문자 색상을 변경할 수 있나요?

CSS만 사용할 수 없다는 주장이 자주 제기되어 왔습니다. 문자열의 마지막 문자 색상을 변경합니다. 그러나 이는 전적으로 사실이 아닌 것으로 밝혀졌습니다.

해결책

두 가지 영리한 CSS 기능을 활용하여 다음과 같은 파격적인 스타일을 구현할 수 있습니다.

1. 텍스트 흐름 역방향: CSS는 unicode-bidi: bidi-override;를 사용하여 텍스트 흐름 방향을 역전시키는 방법을 제공합니다. 재산. 이렇게 하면 문자가 역순으로 나타나 텍스트 방향이 효과적으로 반전됩니다.
2. 의사 요소 선택기: CSS는 ::first-letter 의사 요소 선택기를 제공합니다. 본문의 첫 글자. 텍스트가 반전되어 있으므로 이 선택기는 실제 텍스트의 마지막 문자를 효과적으로 타겟팅합니다.

마크업 예:

효과를 입증하려면 다음을 고려하세요. 다음 마크업:

<code class="html"><div>gnirtS</div></code>

CSS 예:

<code class="css">div {
  float: left;
  unicode-bidi: bidi-override;
  direction: rtl;
}

div::first-letter {
  color: blue;
}</code>

설명: