Wie kann man CSS-Stile nur auf die Hälfte eines Wortes oder Zeichens anwenden

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"></script>
    <style>
      .halfStyle { /* base char and also the right 1/3 */
      position:relative;
      display:inline-block;
      font-size:80px; /* or any font size will work */
      color: transparent; /* hide the base character */
      overflow:hidden;
      white-space: pre; /* to preserve the spaces from collapsing */
      color: #1c87c9; /* for demo purposes */
      text-shadow: 2px 2px 0px #eee; /* for demo purposes */
      }
      .halfStyle:before { /* creates the left 1/3 */
      display:block;
      z-index:2;
      position:absolute;
      top:0;
      width: 33.33%;
      content: attr(data-content); /* dynamic content for the pseudo element */
      overflow:hidden;
      pointer-events: none; /* so the base char is selectable by mouse */
      color: #8ebf42; /* for demo purposes */
      text-shadow: 2px -2px 0px #eee; /* for demo purposes */
      }
      .halfStyle:after { /* creates the middle 1/3 */
      display:block;
      z-index:1;
      position:absolute;
      top:0;
      width: 66.66%;
      content: attr(data-content); /* dynamic content for the pseudo element */
      overflow:hidden;
      pointer-events: none; /* so the base char is selectable by mouse */
      color: #666; /* for demo purposes */
      text-shadow: 2px 2px 0px cyan; /* for demo purposes */
      }
    </style>
  </head>
  <body>
    <hr/>
    <p>Einzelnes Zeichen:</p>
    <span class="halfStyle" data-content="T">T</span>
    <span class="halfStyle" data-content="E">E</span>
    <span class="halfStyle" data-content="X">X</span>
    <span class="halfStyle" data-content="T">T</span>
    <hr/>
    <p>Automatisiert für jeden Text:</p>
    <span class="textToHalfStyle">Halb-Stil Text.</span>
    <hr/>
    <script>
      jQuery(function($) {
          var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style;
      
          // Iteration über alle Klassenereignisse
          $('.textToHalfStyle').each(function(idx, halfstyle_el) {
              $halfstyle_el = $(halfstyle_el);
              halfstyle_style = $halfstyle_el.data('halfstyle') || 'hs-base';
              halfstyle_text = $halfstyle_el.text();
              halfstyle_chars = halfstyle_text.split('');
      
              // Screen-Reader-Text einstellen
              $halfstyle_el.html('<span style="position: absolute;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + halfstyle_text + '</span>');
      
              // Ausgabe für das Anhängen zurücksetzen 
              halfstyle_output = '';
      
              // Über alle Zeichen im Text iterieren
              for (halfstyle_i = 0; halfstyle_i < halfstyle_chars.length; halfstyle_i++) {
                  // Ein Style-Element für jedes Zeichen einstellen und es an den Container anfügen
                  halfstyle_output += '<span aria-hidden="true" class="halfStyle ' + halfstyle_style + '" data-content="' + halfstyle_chars[halfstyle_i] + '">' + halfstyle_chars[halfstyle_i] + '</span>';
              }
              // Chrome 59 und neuere Versionen spezifischer Fix - Teil 1 - beheben einen Chrome-Bug, wo Chrome Pseudoelemente nicht korrekt rendert und neu malt - wir haben diesen Fix nach vielen verschiedenen Tests entwickelt.
              var _applyChromeFix = !!window.chrome && !!navigator.appVersion.match(/.*Chrome\/([0-9\.]+)/) && parseInt(navigator.appVersion.match(/.*Chrome\/([0-9\.]+)/)[1], 10) >= 59;
              if (_applyChromeFix) {
                  halfstyle_output += '<style>.halfStyle{}</style>';
              }
      
              // Nur einmal in DOM schreiben
              $halfstyle_el.append(halfstyle_output);
      
              // Chrome 59 und neuere Versionen spezifischer Fix  - Teil 2
              if (_applyChromeFix) {
                  setTimeout(function(){
                      $halfstyle_el.find('style').remove();
                  }, 0);
              }
          });
      });
    </script>
  </body>
</html>