2

Ребята, нужно чтобы при наведении менялся цвет стрелки, но она идет картинкой. Подумываю сделать стрелку.

Вот начало:

.click-left h4:before{
    content: '';
    display: block;
    position: absolute;
    top: 20px;
    right: 400px;
    width: 56px;
    height: 1px;
    background: white;
}

Нужно получить такую введите сюда описание изображения

При наведении - черная. Реализовала только тонкую линию, а как стрелки сделать не знаю.
Помогите в решении.

2
  • Возьмите лучше шрифтовую иконку: fontawesome.com/icons или попросите у дизайнера в формате svg 4 июн 2018 в 8:04
  • Можно ещё поискать в символах юникода, там довольно много стрелок.
    – MAX
    4 июн 2018 в 8:22

1 ответ 1

2

.click-left h4 {
  position: relative;
}

.arrow {
  display: block;
  position: absolute;
  top: 20px;
  right: 400px;
  width: 56px;
  height: 1px;
  background-color: red;
}

.arrow:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 1px;
  background-color: red;
  transform: rotate(-45deg);
  transform-origin: 100% 0%;
}

.arrow:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 1px;
  background-color: red;
  transform: rotate(45deg);
  transform-origin: 100% 0%;
}

h4:hover .arrow,
h4:hover .arrow:before,
h4:hover .arrow:after {
  background-color: #000;
}
<div class="click-left">
  <h4>Click me<span class="arrow"></span></h4>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.