Как сделать эффект плавного движения ::after вправо и обратно?

Question

[LastGeneral]

<div class="construction_item">
	<img src="wp-content/uploads/2020/06/project-1.jpg" alt="">
	<a href="terraces/">перейти</a>
</div>

.construction_item {
	position: relative;
}
.construction_item a {
	position: absolute;
    left: 0;
    bottom: 0;
    background-color: #fff;
    padding: 0.5em 1em;
	font-weight: 600;
	color: #000;
}
.construction_item a:after {
    content: '\276F';
    padding-left: 0.5em;
}

Comments

[secretsergey]

Постоянное движение туда-обратно или при наведении, или как?

[LastGeneral]

secretsergey, постоянное движение, для привлечения внимания

[Михаил]

LastGeneral, слайдер

[Тарас Шульга]

LastGeneral, прогугли что такое кейфром и изменяй transform - делов на 5м

Answer 1

[secretsergey]

.construction_item a:after {
    content: '\276F';
    padding-left: 0.5em;
  animation: slide-icon alternate 3s infinite;
  display: inline-block;
}

@keyframes slide-icon {
 0% { transform: translate(0, 0); }
 100% { transform: translate(10px, 0); }
}

Comments

[LastGeneral]

Спасибо