I need such a cross, I don’t want to insert a picture, because I need to change the color when hovering. I understand what to do through the border, but I do not understand how to make intersecting lines. 
2 answers
.close{ position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; border: 1px solid #ccc; margin: -25px 0 0 -25px; } .close:before, .close:after{ content: ''; position: absolute; top: 0; width: 2px; height: 100%; } .close:before{ left: calc(50% - 1px); border-left: 2px dotted #00f; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .close:after{ right: calc(50% - 1px); border-right: 2px dotted #00f; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .close:hover:before, .close:hover:after{ border-color: #f00; } <a href="#" class="close"></a> 
soledar10 soledar10
22.4k five 21 51
|
<a href="#" class="close"> .close { position: absolute; right: 32px; top: 32px; width: 32px; height: 32px; opacity: 0.3; } .close:hover { opacity: 1; } .close:before, .close:after { position: absolute; left: 15px; content: ' '; height: 33px; width: 2px; background-color: #333; } .close:before { transform: rotate(45deg); } .close:after { transform: rotate(-45deg); } online test: https://codepen.io/brissmyr/pen/egidw
Andrey Andrey
382 2 9
|