② Добавление специального символа

Продолжим изучение темы CSS - контент. Если пропустили прошлую статью, то вот ссылка на неё:

• ① Свойство content

Можно оживить текст с помощью добавления специальных символов. В качестве значения используется символ Юникода.

HTML

<h1>Happy New Year!</h1>

CSS

h1 { 
font-family: 'Niconne', cursive; 
font-size: 50px; 
color: #e12527; 
}
h1:before, h1:after { 
content: "\2746"; 
display: inline-block; 
font-size: 60px; 
color: #38afaa; 
-webkit-animation: my 4s infinite alternate; 
animation: my 4s infinite alternate; 
}
h1:before { 
margin-right: 0.5em; 
}
h1:after { 
margin-left: 0.5em; 
}
@-webkit-keyframes my {
    0%   {color: #2e2f92;}
    25%  {color: #38afaa;}
    50%  {color: #5b59a7;}
    75%  {color: #f7b21c;}
    100% {color: #e12527;}
 }
@keyframes my {
    0%   {color: #2e2f92;}
    25%  {color: #38afaa;}
    50%  {color: #5b59a7;}
    75%  {color: #f7b21c;}
    100% {color: #e12527;}
 }

Продолжение в следующей статье!