Пример, где jQuery используется для эффекта тройной стилизации |CSS Сниппеты |W3Docs

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"></script>
    <style>
      .halfStyle { /* базовый символ и правый 1/3 */
      position:relative;
      display:inline-block;
      font-size:80px; /* или любой размер шрифта будет работать */
      color: transparent; /* скрыть базовый символ */
      overflow:hidden;
      white-space: pre; /* чтобы избегать свертывания пространств */
      color: #1c87c9; /* в целях демо использования */
      text-shadow: 2px 2px 0px #eee; /* в целях демо использования */
      }
      .halfStyle:before { /* создает левый 1/3 */
      display:block;
      z-index:2;
      position:absolute;
      top:0;
      width: 33.33%;
      content: attr(data-content); /* динамический контент для псевдоэлемента */
      overflow:hidden;
      pointer-events: none; /* разрешает выбор базового символа с помощью мыши */
      color: #8ebf42; /* в целях демо использования */
      text-shadow: 2px -2px 0px #eee; /* в целях демо использования */
      }
      .halfStyle:after { /* создает средний 1/3 */
      display:block;
      z-index:1;
      position:absolute;
      top:0;
      width: 66.66%;
      content: attr(data-content); /* динамический контент для псевдоэлемента */
      overflow:hidden;
      pointer-events: none; /* разрешает выбор базового символа с помощью мыши */
      color: #666; /* в целях демо использования */
      text-shadow: 2px 2px 0px cyan; /*  в целях демо использования */
      }
    </style>
  </head>
  <body>
    <hr/>
    <p>Single Characters:</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>Automated on any text:</p>
    <span class="textToHalfStyle">Half-style text.</span>
    <hr/>
    <script>
      jQuery(function($) {
          var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style;
      
          // Выполните перебор всех классов 
      
          $('.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('');
      
              // Установите программу для чтения текста с экрана 
              $halfstyle_el.html('<span style="position: absolute;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + halfstyle_text + '</span>');
      
              // Восстановите вывод для дополнения 
      
              halfstyle_output = '';
      
              // Выполните перебор всех символов в тексте 
      
              for (halfstyle_i = 0; halfstyle_i < halfstyle_chars.length; halfstyle_i++) {
                  // Создайте стилизованный элемент для каждого символа и добавьте к контейнеру 
                  halfstyle_output += '<span aria-hidden="true" class="halfStyle ' + halfstyle_style + '" data-content="' + halfstyle_chars[halfstyle_i] + '">' + halfstyle_chars[halfstyle_i] + '</span>';
              }
              // Chrome 59 and above specific fix - Part 1 - Addresses a Chrome bug where Chrome fails to corectly render and repaint pseudo elements
              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>';
              }
      
              // Обратитесь к DOM только один раз
      
              $halfstyle_el.append(halfstyle_output);
      
              // Chrome 59 and above specific fix - Part 2
      
              if (_applyChromeFix) {
                  setTimeout(function(){
                      $halfstyle_el.find('style').remove();
                  }, 0);
              }
          });
      });
    </script>
  </body>
</html>