Question

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

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

我想在不添加边框的情况下这样做，这是必须的。

我也不想使用线性渐变。

我真的只想用我在那里的代码来做这件事，没有任何额外的东西。

我已经使用了背景颜色，但它们并没有显示出来。

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

它应该是这样的：

Screenshot

相反它看起来像这样：

Screenshot

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

无国界

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

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

Answer 2

您要多次为CSS中的元素指定样式，最终会删除以前的样式。例如，您分配了背景背景：#ffffff;以后的背景：#ffffff; 您的代码的另一个问题是您使用伪元素作为中心的边框线，因此添加背景颜色没有显示，因为伪元素没有可见宽度（以及其他东西）。我只是为伪元素声明了一个宽度，并将它们重新定位在它们的父元素中。然后使用border :: right在:: before和border-left上获得两个边界线。:: after。代码如下。

＆＃13;

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

＆＃13;

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

＆＃13;

试图让颜色显示

2 个答案: