How to specify this effect in the menu?

How to set hover effect on li in the menu?
5cf7f278b8408443117566.png
March 23rd 20 at 19:15
1 answer
March 23rd 20 at 19:17
Solution
add to the end
.menu_item:hover:after, .menu_item:hover:before{
display:block;
}
.menu_item{
 position: relative;
}

.menu_item:after{
 position: absolute;
 content: "";
 display: none;
 width: 1px;
 height: 1px;

 left: -10px;
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 border-bottom: 23px solid #3a5362;

 transform: rotate(-86deg) scale(.5);
 bottom: -10px;
}
.menu_item:before{
 position: absolute;
 content: "";
 display: none;
 width: 1px;
 height: 1px;
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 border-bottom: 23px solid #3a5362;
 right: -10px;
 transform: rotate(86deg) scale(.5);
 bottom: -10px;
}

Find more questions by tags HTMLCSS