순수 CSS로 문자 절반의 스타일을 지정하는 방법은 무엇입니까?

문자의 절반에 CSS를 적용하는 방법

배경:

스타일 1에 대한 솔루션을 찾고 있습니다. 이 경우에는 문자의 절반을 투명하게 만듭니다. CSS나 JavaScript로 문자의 일부를 스타일링하는 것과 같은 방법을 사용한 이전 시도는 실패했습니다. 텍스트의 동적 특성으로 인해 이미지 기반 솔루션은 바람직하지 않습니다.

해결책: 하프 스타일

하프 스타일 소개:

Half-Style은 단일 문자에 대한 순수 CSS 스타일 또는 여러 문자에 대한 JavaScript 기반 자동화를 제공하는 솔루션입니다. 스크린 리더에 대한 접근성을 유지합니다.

1부: 기본 솔루션(단일 문자)

스타일을 지정하려는 문자에 ".halfStyle" 클래스를 적용하기만 하면 됩니다. 문자 값을 포함하는 "data-content" 속성과 함께.

예:

<code class="html"><span class="halfStyle" data-content="X">X</span></code>

파트 2: 자동화된 솔루션

여러 문자 또는 동적 텍스트의 경우 상위 요소에서 ".textToHalfStyle" 클래스를 사용하고 JavaScript를 적용하여 스타일이 지정된 요소를 생성하세요.

코드 조각:

<code class="javascript">// jQuery for automated mode
$('.textToHalfStyle').each(function(idx, el) {
  var text = $(el).text(),
      chars = text.split(''),
      output = '';

  for (var i = 0; i < chars.length; i++) {
    output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
  }

  $(el).append(output);
});</code>

CSS:

<code class="css">.halfStyle {
  font-size: 80px;
  color: black;
  white-space: pre;
}

.halfStyle:before {
  display: block;
  width: 50%;
  content: attr(data-content);
  color: #f00;
}</code>

라이브 데모: https://jsfiddle.net/arbel/pd9yB/1694/

Github 플러그인: https://github.com/arbel/half-style

위 내용은 순수 CSS로 문자 절반의 스타일을 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!