Css Border Hover Effect Issue - html

Question

I have a web page using the following HTML code:
<ol class="progress-bar">
<li class="progress-bar__steps not-current">
<span class="progress-bar__steps--numbers"></span>
<span class="progress-bar__steps--text">option 1</span>
</li>
<li class="progress-bar__steps not-current">
<span class="progress-bar__steps--numbers"></span>
<span class="progress-bar__steps--text">option 2</span>
</li>
<li class="progress-bar__steps current">
<span class="progress-bar__steps--numbers"></span>
<span class="progress-bar__steps--text">option 3</span>
</li>
<li class="progress-bar__steps not-current">
<span class="progress-bar__steps--numbers"></span>
<span class="progress-bar__steps--text">option 4</span>
</li>
</ol>
and using this CSS code:
.progress-bar {
list-style: none;
overflow: hidden;
font: 14px Helvetica;
font-weight: 600;
display: flex;
counter-reset: li;
padding: 0px;
}
.progress-bar__steps:hover{
border: 2px solid #1779ba;
background:yellow;
}
.progress-bar__steps {
background: #ddd;
color: #666;
width: 25%;
position: relative;
cursor: default;
list-style-image: none;
list-style-type: none;
padding: 20px 5px;
text-align: center;
border: 2px solid transparent;
}
#media screen and (min-width: 800px) {
.progress-bar__steps {
padding: 20px 0 20px 65px;
text-align: left;
}
}
#media screen and (min-width: 800px) {
.progress-bar__steps:first-child {
padding: 20px 0 20px 30px;
}
}
#media screen and (min-width: 800px) {
.progress-bar__steps:after {
border-bottom: 50px solid transparent;
border-top: 50px solid transparent;
content: " ";
display: block;
height: 0;
left: 100%;
margin-top: -50px;
position: absolute;
top: 50%;
width: 0;
border-left: 30px solid #ddd;
z-index: 2;
}
}
#media screen and (min-width: 800px) {
.progress-bar__steps:before {
border-bottom: 50px solid transparent;
border-top: 50px solid transparent;
content: " ";
display: block;
height: 0;
left: 100%;
margin-top: -50px;
position: absolute;
top: 50%;
width: 0;
border-left: 30px solid #fff;
z-index: 1;
margin-left: 5px;
}
}
.progress-bar .current {
background: #1779ba;
color: #fff;
}
.progress-bar .not-current {
cursor:pointer;
}
.progress-bar .current:after {
border-left: 30px solid #1779ba;
}
#media screen and (min-width: 800px) {
.progress-bar__steps--numbers:before {
content: counter(li) " ";
counter-increment: li;
margin-right: 15px;
background: white;
border: 1px solid transparent;
border-radius: 50%;
display: inline-block;
height: 20px;
line-height: 20px;
text-align: center;
width: 20px;
}
}
.current .progress-bar__steps--numbers:before {
background: white;
color: #1779ba;
}
The code is working properly in all major browsers, Safari, Chrome, Firefox, Internet Explorer except in one thing, the border hover effect is not working in full.
In order to better understand the issue I have setup a working demo. You can find the working demo at this location:
https://codepen.io/anon/pen/OZRYPV

Answer 1

I tweaked a bit your code to show what can be possibly be done there: https://codepen.io/anon/pen/GdjaGZ.
#media screen and (min-width: 800px) {
.progress-bar__steps:after {
border-bottom: 31px solid transparent;
border-top: 31px solid transparent;
content: " ";
display: block;
height: 0;
right: -19px;
margin-top: -31px;
position: absolute;
top: 50%;
width: 0;
border-left: 19px solid #ddd;
z-index: 2;
}
}
#media screen and (min-width: 800px) {
.progress-bar__steps:before {
border-bottom: 33px solid transparent;
border-top: 33px solid transparent;
content: " ";
display: block;
height: 0;
right: -22px;
margin-top: -33px;
position: absolute;
top: 50%;
width: 0;
border-left: 20px solid #fff;
z-index: 1;
margin-left: 0;
}
.progress-bar__steps:hover:after {
border-left-color: yellow;
}
.progress-bar__steps:hover:before {
border-left-color: #1779ba;
}
}
The problem with the shape is that you can't easily create border there. the easies solution in my opinion is to use SVG of the shape you need with stroke as it will make it look good and it'll be easier to position it. You can create the path using any vector editor. There should be even online ones.