html - 试图让颜色显示

Question

在代码中，行是使用伪元素添加的。由于某种原因，颜色不会透过它显示出来。

我如何使用代码中的那些伪元素让它工作？

我要做到不加边框，这是必须的。

我也不想使用线性渐变。

我真的只是想用我现有的代码来做这件事，没有添加任何额外的东西。

我已经在使用背景颜色，只是它们没有显示出来。

它要求我提供更多信息，但基本上就是这样。

它应该是这样的:

Screenshot

它看起来像这样:

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

无边界

由于您的限制，这更像是一种解决方法。在 lines div 上创建另一个 before/after 元素，并将这些元素用作您的行。

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;
}

旧答案

除了设置线条的背景之外，您还应该使用边框。

https://jsfiddle.net/qd7xLsdt/

我删除了影响这两行的 background、left 和 width 属性(否则，之前的属性将被覆盖):

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

我还为你的线条添加了边框:

.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;
}