Aquí tenemos un ejemplo sencillo de cómo hacerlo.

 <style> p{ display: block; position: relative; width: 136px; } .circle{ position: absolute; height: 5px; width: 5px; background: #00ff00; right: -20px; border-radius: 20px; top: 5px; transition: ease-in-out .2s all; z-index: -1; } .line{ position: absolute; height: 2px; width: 40px; background: #00ff00; right: -70px; border-radius: 20px; top: 5px; transition: ease-in-out .2s all; } p:hover .circle{ height: 60px; width: 60px; background: red; right: -30px; border-radius: 38px; margin: auto; top: -20px; } p:hover .line{ width: 60px; right: -90px; } p:hover .white-on-hover{ color: #fff; transition: ease-in-out .2s all; } </style> <script> window.onload = function(){ //get cms string var cmsText = document.getElementById('cmsText').innerHTML; //separe words cmsText = cmsText.split(' '); //get last words lastWord = cmsText[cmsText.length-1]; //separe letters lastWord = lastWord.split(''); var newLastWord = ''; //concat all letters and add span with class "white-on-hover" before last 4 letters for(let i = 0; i < lastWord.length; i++){ if(i == lastWord.length-4){ newLastWord+='<span class="white-on-hover">'; newLastWord += lastWord[i]; }else if(i == lastWord.length-1){ newLastWord += lastWord[i]; newLastWord+='</span>'; }else{ newLastWord += lastWord[i]; } } //concat all words adding the new last word var newCmsText = ''; for(let i = 0; i < cmsText.length; i++){ if(i != cmsText.length-1){ newCmsText += cmsText[i]; newCmsText += ' '; }else{ newCmsText += newLastWord; } } //change the text for new text document.getElementById('cmsText').innerHTML = newCmsText; } </script> <p><span id="cmsText">title button advanced</span> <span class="circle"></span> <span class="line"></span> </p>

Nota 1: estoy usando muchas etiquetas html, esta no es una buena sintaxis HTML. Este es un ejemplo y es una buena práctica si cambia algunos detalles.

Nota 2: este JavaScript no es la mejor solución, funciona y es muy simple de entender