JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="title">Заголовок новостей</div>
<div class="title2">Заголовок новостей</div>

CSS

.title {
  font-family: Arial;
  color: #777;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px;
  position: relative;
  line-height: 25px;
}

.title span {
  color: rgb(88, 180, 236);
}

.title2 {
  font-family: Arial;
  color: #FF8B8B;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px;
  position: relative;
  line-height: 25px;
}

.title2::after {
  content: "";
  position: absolute;
  bottom: -3px;
  height: 3px;
  width: 60px;
  background-color: #FF8B8B;
  left: 0;
}

JavaScript

(function () { 
    $('.title').each(function() {
        var node = $(this).contents().filter(function () { 
            return this.nodeType == 3 }).first(),
            text = node.text(),
            first = text.slice(0, text.indexOf(" "));
        if (!node.length) {
            return;
        }
        node[0].nodeValue = text.slice(first.length);
        node.before('<span>' + first + '</span>');
    });
})();