Guys, you need to change the color of the arrow when you hover, but it goes in the picture. I'm thinking of making an arrow.

Here is the beginning:

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

Need to get this enter image description here

When hovering - black. I implemented only a thin line, but I don’t know how to make arrows.
Help in solving.

  • Take better font icon: fontawesome.com/icons or ask the designer in svg format - Klimenkomud
  • You can also search in Unicode characters, there are quite a few arrows. - MAX

1 answer 1

 .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>