Wie formatiere ich einen halben Charakter mit reinem CSS?

So wenden Sie CSS auf die Hälfte eines Zeichens an

Hintergrund:

Sie suchen nach einer Lösung für den Stil eines Zeichens die Hälfte eines Zeichens, was es in diesem Fall transparent macht. Frühere Versuche, Methoden wie das Stylen eines Teils eines Zeichens mit CSS oder JavaScript zu verwenden, waren erfolglos. Eine bildbasierte Lösung ist aufgrund der dynamischen Natur des Textes unerwünscht.

Lösung: Half-Style

Einführung von Half-Style:

Half-Style ist eine Lösung, die reines CSS-Styling für ein einzelnes Zeichen oder JavaScript-basierte Automatisierung über mehrere Zeichen hinweg bietet. Die Zugänglichkeit für Bildschirmleseprogramme bleibt erhalten.

Teil 1: Grundlösung (Einzelzeichen)

Wenden Sie einfach die Klasse „.halfStyle“ auf das Zeichen an, das Sie formatieren möchten. zusammen mit einem „Dateninhalt“-Attribut, das den Wert des Zeichens enthält.

Beispiel:

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

Teil 2: Automatisierte Lösung

Verwenden Sie für mehrere Zeichen oder dynamischen Text die Klasse „.textToHalfStyle“ für das übergeordnete Element und wenden Sie JavaScript an, um die gestalteten Elemente zu generieren.

Code-Snippet:

<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>

Live-Demo: https://jsfiddle.net/arbel/pd9yB/1694/

Github-Plugin: https://github.com/arbel/half-style

Das obige ist der detaillierte Inhalt vonWie formatiere ich einen halben Charakter mit reinem CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!