CSS hexagon link hover

Question

Trying to implement a hexagon ul list using css and having issues with the hover state. Currently when hovered only the border left and right change color, I need all sides. I think the issue lies somewhere in the li hover before class but trying this doesn't work. Thanks.

ul.pagination li {
 display: inline-block;
 position: relative;
 width: 30px;
 height: 17.32px;
 margin: 12px 8px;
 border-left: solid 2px #d7d7d7;
 border-right: solid 2px #d7d7d7;
 cursor: pointer;
}
ul.pagination li:before {
 top: -10.61px;
 border-top: solid 2.83px #d7d7d7;
 border-right: solid 2.83px #d7d7d7;
}
ul.pagination li:after, ul.pagination li:before {
 content: "";
 position: absolute;
 width: 21.21px;
 height: 21.21px;
 -webkit-transform: scaleY(.5774) rotate(-45deg);
 transform: scaleY(.5774) rotate(-45deg);
 background-color: inherit;
 left: 2.39px;
}

Fiddle is: https://jsfiddle.net/91jeee5m/

Answer 1

You've got the right way to do, just do the same with :before and :after state like this :

ul.pagination li:hover:after {
    border-left: solid 2px #00A2C6;
    border-bottom: solid 2px #00A2C6;
}
ul.pagination li:hover:before {
    border-top: solid 2px #00A2C6;
    border-right: solid 2px #00A2C6;
}

See it here

Answer 2

You need to set the border color on your :before and :after pseudo-elements as well:

ul.pagination li:hover,
ul.pagination li:hover:before,
ul.pagination li:hover:after {
    border-color: #00A2C6;
}

Answer 3

Here is simple hexagon pagination

 * { box-sizing: border-box } body { text-align: center } #hexagon, #hexagon li { position: relative } #hexagon{ margin-top: 40px ; } #hexagon li { position: relative; display: block; width: 54px; height: 30px; float: left; margin-right: 30px; list-style-type:none; } #hexagon li, #hexagon li:before, #hexagon li:after{ border-left: 4px solid red; border-right: 4px solid red; transition: all .6s; backface-visibility:hidden; } #hexagon li:before, #hexagon li:after { content: ""; position: absolute; width: 46px; height: 30px; transform-origin: center center 0px; } #hexagon li:before { transform: rotate(-60deg); left: -4px; bottom: 0px; } #hexagon li:after { transform: rotate(60deg); left: -4px; bottom: 0px; } #hexagon li:hover,#hexagon li:hover:before,#hexagon li:hover:after { border-left: 4px solid green; border-right: 4px solid green; cursor:pointer } 

 <ul id=hexagon class=pagination> <li><a href="#">1</a> </li> <li><a href="#">2</a> </li> <li><a href="#">3</a> </li> <li><a href="#">...</a> </li> </ul>