CSS从文本移动一个字母

Question

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

Answer 1

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

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

由于您要为此设置动画，我已使用以下代码更新this fiddle：

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

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