Анимация CSS Расстояние между буквами с направлением

Question

My Plan:
Чтобы добавить несколько слов вправо от экрана с большим количеством букв.
Когда эти слова зависнут, расстояние между буквами уменьшается.
НО, когда расстояние между буквами уменьшается, текст должен еще быть выровнены вправо, т.е.

               H E L L O 
                   W O R L D 
// When hovered --> 
                     HELLO 
                     WORLD 

Так последние буквы в каждом слове есть фиксированное положение.

До сих пор: https://jsfiddle.net/ogoo77h8/1/#&togetherjs=QjBe1mjmJe
Когда я пробовал последние буквы в каждом слове двигаться.

Спасибо!

Answer 1

Вот решение без изменения HTML:

https://jsfiddle.net/16wgkemj/

Это в основном только позиционирует <p> элемент вправо (вместо слева), то выравнивает букву расстояние между последней буквой с запасом.

.title { 
    position: absolute; 
    top: 2%; 
    right: 0%; 
    font-size: 30px; 
    text-align: right; 
    letter-spacing: 20px; 
} 

.hello, 
.world { 
    -webkit-transition: letter-spacing 2s ease, margin-right 2s ease; 
    transition: letter-spacing 2s ease, margin-right 2s ease; 
    display:block; 
    margin-right:0px; 

} 

.hello:hover, 
.world:hover { 
    letter-spacing: 0px; 
    margin-right:20px; 
} 

Answer 2

Маленькое обновление html и css может решить проблему.

попробовать это

<p class="title"> 
    <span class="hello">HELL<span>O</span></span> 
    <span class="world">WORL<span>D</span></span> 
</p> 

добавить CSS

.hello span, 
.world span{ 
    letter-spacing: 0; 
}