пульсирующий эффект на значок в HTML5 с CSS

Question

У меня есть элемент

<a class="fa fa-user icon" href="#"></a> 

Мое требование иметь пульсирующий эффект всякий раз, когда мышь находится на вершине.

Мои CSS-это что-то вроде этого.

.icon:hover{ 
    -webkit-animation: pulse 2s ease-in; 
    -moz-animation: pulse 2s ease-in; 
    animation: pulse 2s ease-in; 
    -webkit-animation-iteration-count: infinite; 
    -moz-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
} 


@keyframes pulse { 
    0% { 
    -webkit-transform: scale(1); 
    opacity: 0.0; 
} 
25% { 
    -webkit-transform: scale(1.35); 
    opacity: 0.1; 
} 
50% { 
    -webkit-transform: scale(1.7); 
    opacity: 0.3; 
} 
75% { 
    -webkit-transform: scale(2.05); 
    opacity: 0.5; 
} 
100% { 
    -webkit-transform: scale(2.4); 
    opacity: 0.0; 
} 
} 

Эффект прекрасно работает, но оригинальная иконка исчезает. Я хочу, чтобы исходный значок оставался видимым, пока пульсирующий эффект случается, чтобы он выделялся, когда человек держит мышь поверх нее.

Нужно ли накладывать оригинальный div на новый значок?

JSFiddle доступен: https://jsfiddle.net/3bu8fxnp/9/

Answer 1

Updated Fiddle

Вы можете добавить вторую иконку в псевдо элемента after.

.fa-user:after { 
    content: "\f007"; 
    display: block; 
} 

.fa-user:before { 
    position: absolute; 
} 

Вам необходимо изменить селектор с переходом, чтобы влиять только на один из псевдо элементов.

.icon:hover:before { 
    ... 
}