CSS перемещение одной буквы из текста

Question

Есть ли способ переместить одну букву из слова в CSS? Итак, сначала это равномерно распределенное слово. Тогда, например, первая буква слова перемещает 10px влево, но остальная часть слова остается там, где она есть.

Answer 1

Вы можете использовать ::first-letter селектор в CSS, как in this example

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

Так как вы хотите, чтобы оживить это, я обновил this fiddle с этим кодом:

Вы не можете использовать :: первого письма с неживой поэтому я использую <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;} 
}