动画CSS字母间距与方向

Question

我的计划：
让一些单词以很大的字母间距排列在屏幕右侧
当这些单词悬停在上面时，字母间距会减小
但是，当字母间距减小时，文本必须仍然向右对齐，即

                                                              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;
}