raulbaros raulbaros - 2 months ago 7
CSS Question

Position hover-over circle exactly over X

I am trying to perfectly position a perfectly round circle directly over the "X" upon hover-over. How to make that work?



.select2-selection__clear {
font-size:20px;
padding-right:10px;
}

.select2-selection__clear:hover {
background-color:#000;
color:#FFF;
width:20px;
height:20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}

<span class="select2-selection__clear">×</span>




Answer

This way:

.select2-selection__clear {
    display: inline-block;
    font-size: 20px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 20px;
}

.select2-selection__clear:hover {
    background-color: #000;
    color: #fff;
}
<span class="select2-selection__clear">×</span>

This is better than setting padding, because it is more universal. Text inside may change, but the layout will not break (and the circle will actually be a circle).

Comments