CSS 从文本中移动一个字母

Question

有没有办法从 CSS 中的单词中移动一个字母？所以首先是这个均匀间隔的词。然后例如单词的第一个字母向左移动 10px，但单词的其余部分保持原位。

Answer 1

您可以在 CSS 中使用 ::first-letter 选择器，例如 in this example

p::first-letter {
  margin-right: 10px;
}

既然你想让它动起来，我已经用这段代码更新了 this fiddle：

您不能将 ::first-letter 与 animate 一起使用，所以我在 <p> 元素中使用了 <span>

HTML :

<p>
    <span>E</span>xample
</p>

CSS :

p span {
  -webkit-animation: mymove 1s 1; /* Chrome, Safari, Opera */ 
  animation: mymove 1s 1;
  position: relative;
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    0%   {margin-right: 0;}
    100% {margin-right: 10px;}
}

/* Standard syntax */
@keyframes mymove {
    0%   {margin-right: 0;}
    100% {margin-right: 10px;}
}

CSS 从文本中移动一个字母

CSS move one letter from text

css

animation

transitions