伪元素：不显示后

Question

如您所见，我想要一条线运行通过我的 canvas 的中心，所以我决定使用 after 元素！它正在渲染，正如在控制台的屏幕截图中所见，但无论出于何种原因，它都无法显示！我不知道自己做错了什么！谢谢！这是我的 Code Pen

代码：

function start() {  
  var canvas = $("canvas");
  console.log(canvas);
  canvas.each(function(index, canvas) {
      var context = canvas.getContext("2d"); 
      canvas.width = $(".box").eq(index).width();
      canvas.height = $(".box").eq(index).height();
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawCurves(context, step);
      step += 1;
  });
  requestAnimationFrame(start);
}
var step = -1;
function drawCurves(ctx, step) {
    var width = ctx.canvas.width;
    var height = ctx.canvas.height;
    ctx.lineWidth = 2;
    
  for (i = 0; i < 4 ; i++) {    
    var x = 0;
    var y = 0;
    ctx.beginPath();
    if (i === 0 ) {
      ctx.strokeStyle = "red";
      var amplitude = 20;
     var frequency = height / (2 * Math.PI); 
      console.log(i, frequency);
      ctx.save();
  ctx.translate(-amplitude * Math.sin(step / frequency), 0);
     }  if ( i === 1) {
         ctx.strokeStyle = "blue";
       var amplitude = 30;
      var frequency = (height / (2 * Math.PI));
      console.log(i, frequency);
       ctx.save();
  ctx.translate(-amplitude * Math.sin(step / frequency), 0);
     }  if ( i === 2) {
          ctx.strokeStyle = "green";
       var amplitude = 40;
       var frequency = height / (2 * Math.PI) ;
      console.log(i, frequency);  
       ctx.save();
  ctx.translate(-amplitude * Math.sin(step / frequency), 0);
     }  if (i === 3) {
       ctx.strokeStyle = "yellow";
       var amplitude = 50;
      var frequency = height / (2 * Math.PI) ;
      console.log(i, frequency);
       ctx.save();
  ctx.translate(-amplitude * Math.sin(step / frequency), 0);
     }
  
  while (y < height ) {
    x = (width / 2) + (amplitude * Math.sin((y + step) / frequency)) ;
    ctx.lineTo(x, y);
    y++;
  }
  ctx.stroke();
  ctx.restore();
}
  }


$(document).ready(function() {
  start();
})

canvas {
  background-color: wheat;
  position: absolute;
   &:after {
            content: '';
            display: block;
            position: absolute;
            background-color: #EA777A;
            width: 20px;
            height: 100%;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
}
.box {
width: 500px;
 height: 2000px;
  border: solid;
}

.box.t {
width: 500px;
 height: 200px;
  border: solid;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <div class="box t">
   <canvas id="canvas"></canvas>
</div>
  <div class="box">
       <canvas id="canvas"></canvas>
    </div>

</body>

</html>

呈现代码的屏幕截图：

Answer 1

Canvas 不能有 ::after。您可以将其包装在 <div> 中并给它一个 ::after。

伪元素：不显示后

Pseudo element :after not displaying

html

javascript

css

pseudo-element