Сразу прошу прощение если как-то непонятно объясняю.
<div class="input__back">
<a class="focus__input" data-symbol=""></a>
<a class="back__title" href="">Назад</a>
</div>
a {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
text-decoration: none;
transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
}
a:focus {
outline: none !important;
}
a:hover {
text-decoration: none;
color: #a64bf4;
}
.focus__input {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.focus__input::after {
content: attr(data-symbol);
font-family: Material-Design-Iconic-Font;
color: #adadad;
font-size: 22px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
height: calc(100% - 20px);
bottom: 0;
left: 0;
padding-left: 13px;
padding-top: 3px;
}
.focus__input::before {
content: "";
display: block;
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: #7f7f7f;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.back__title {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: -12.3px;
left: 30px;
color: #adadad;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 15px;
}
.input__back {
position: relative;
display: block;
width: 100%;
height: 100%;
right: 55px;
bottom: 45px;
color: #a64bf4;
}
Имеется кнопка
<A>Назад</A>
и обычная иконка стрелочки(шрифт), при наведении на текст цвет изменяется, как можно одновременно изменить цвет и у стрелочки?