文字の半分を純粋な 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 中国語 Web サイトの他の関連記事を参照してください。