Trying to get the color to show

Question

In the code, the lines are added using pseudo elements. For some reason the colors won't show through it.

How would I get it to work using those pseudo elements in the code?

I want to do it without adding borders, this is a must.

I don't want to use linear-gradient either.

I'm really just trying to do it with just the code I have there, without anything extra added to it.

I'm already using background colors, they are just not showing through.

It's asking me to provide more info, but that's basically it.

It should look like this:

Screenshot

Instead it looks like this:

Screenshot

https://jsfiddle.net/kytc6sb0/89/

    .wrap {
      position: relative;
      width: 266px;
      height: 174px;
      margin-top: 8px;
      overflow: hidden;
    }
    
    .wrap a {
      float: left;
      width: 50px;
      height: 50px;
      margin: 0 4px 12px 0;
      color: transparent;
      background: rgba(0, 0, 0, .2);
      border: 3px solid #0059dd;
      box-sizing: border-box;
    }
    
    .wrap li a {
      position: relative;
      background: #ffffff;
      border: 3px solid #0059dd;
    }
    
    .wrap li a::before,
    .wrap li a::after {
      content: '';
      position: absolute;
      top: 0;
      width: 12px;
      height: 44px;
    }
    
    .wrap li a::before {
      left: 0;
      background: #00ffff;
    }
    
    .wrap li a::after {
      right: 0;
      background: #ff00ff;
    }
    
    li .lines a::before,
    li .lines a::after {
      content: "";
      position: absolute;
      top: 0;
      left: 12px;
      width: 3px;
      height: 100%;
      background: #0059dd;
    }
    
    li .lines a::after {
      left: 29px;
    }
    
    .nav {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .hide {
      display: none;
    }
    
    

    <div class="wrap">
      <ul class="nav">
    
        <li>
          <div class="lines">
            <a href="" target="_blank"></a>
          </div>
        </li>
      </ul>

Answer 1

You are assigning styles to elements within your CSS multiple times which ends up removing the previous style. For example you assigned the a background of background: #ffffff; and later background: #ffffff; Another issue with you code is that you were using the pseudo elements as the border lines in the center therefore adding a background color did not show up due to the pseudo-elements not have a visible width(along with other things). I simply declared a width for the pseudo elements and re-positioned them within their parent. The two border lines were then obtained using border-right on a::before and border-left on a::after. The code is below.

.wrap {
      position: relative;
      width: 266px;
      height: 174px;
      margin-top: 8px;
      overflow: hidden;
    }
    
    .wrap a {
      position: relative;
      float: left;
      width: 50px;      /*Content: 44px  + Border: 3px + 3px */
      height: 50px;
      margin: 0 4px 12px 0;
      color: transparent;
      /* background: rgba(0, 0, 0, .2); */
      border: 3px solid #0059dd;
      box-sizing: border-box;
    }
    
/* 
    .wrap li a {
      position: relative;
      background: #ffffff;
      border: 3px solid #0059dd;
    }
     */

/*  .wrap li a::before,
    .wrap li a::after {
      content: '';
      position: absolute;
      top: 0;
      width: 12px;
      height: 44px;
    } */
    
    .wrap li a::before {
      left: 0;
      background: #00ffff;
      border-right: 3px solid #0059dd;
    }
    
    .wrap li a::after {
      right: 0;
      background: #ff00ff;
      border-left: 3px solid #0059dd;
    }
    
    li .lines a::before,
    li .lines a::after {
      content: "";
      position: absolute;
      top: 0;
      /* left: 12px; */
      /* width: 3px; */
      /* (parent width / 3) - pseudoEl-border */
      width: calc( (44px / 3) - 3px);  
      height: 100%;
      /* background: #0059dd; */  
    }
    
    li .lines a::after {
      left: 29px;
    }
    
    .nav {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .hide {
      display: none;
    }
    
    

<div class="wrap">
  <ul class="nav">

    <li>
      <div class="lines">
        <a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History"></a>
      </div>
    </li>
  </ul>

Answer 2

Without borders

This is more like a workaround due to your restrictions. Create another before/after element on the lines div, and use those ones as your lines.

https://jsfiddle.net/raj0porg/

.lines {
  position: relative;
}

.lines::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 44px;
  background: #00ffff;
  z-index: 1;
}

.lines::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 35px;
  width: 12px;
  height: 44px;
  background: #ff00ff;
  z-index: 1;
}

Old answer

You should use borders in addition to setting the background of the lines.

https://jsfiddle.net/qd7xLsdt/

I removed your background, left and width properties that affect both lines (since otherwise, the previous properties would have been overwritten):

li .lines a::before,
li .lines a::after {
  content: "";
  position: absolute;
  top: 0;
  //left: 12px;
  //width: 3px;
  height: 100%;
  //background: #0059dd;
}

I also added borders to your lines:

.wrap li a::before {
  left: 0;
  background: #00ffff;
  border-right: 3px solid #0059dd;
}

.wrap li a::after {
  right: 0;
  background: #ff00ff;
  border-left: 3px solid #0059dd;
}