Is it Groundhog day again!
The code I gave you in post #51 is how to do it with 4 pseudos.
2 of my pseudos were on the anchor, 2 were on the div.
You keep trying to put 4 pseudos on one anchor, it can’t be done, period.
You said you thought it was crazy, and I did too!
Besides that it’s going to cause you problems with stacking levels and opacity.
The code I just gave you above will solve those problems, I have revised it below with opacity set into rgba colors, Without effecting the borders.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<style>
.wrap {
position: relative;
width: 266px;
height: 174px;
margin-top: 8px;
overflow: hidden;
background: url("https://i.imgur.com/dCneQvW.png") no-repeat -260px 0;
}
.nav {
margin: 0;
padding: 0;
list-style: none;
}
.nav li {float:left;}
.nav li a {
float: left;
width: 50px;
height: 50px;
margin: 0 4px 12px 0;
border: 3px solid #0059dd;
}
.nav li.lines a { background:
linear-gradient(to right,
rgba(0, 255, 255, 0.5), rgba(0, 255, 255, 0.5) 14px, /*left block*/
#0059dd 14px, #0059dd 17px, /*3px border*/
rgba(255, 255, 255, 0.5) 17px, rgba(255, 255, 255, 0.5) 33px, /*center block*/
#0059dd 33px, #0059dd 36px, /*3px border*/
rgba(255, 0, 255, 0.5) 36px); /*right block*/
/*rules below to be removed, testing for bottom right corner*/
position:relative;
top:116px; left:208px;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="nav">
<li class="lines">
<a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History"></a>
</li>
</ul>
</div>
</body>
</html>