伪元素：不显示后[重复]答案

【问题标题】：Pseudo element :after not displaying [duplicate]伪元素：不显示后[重复]
【发布时间】：2019-05-13 14:24:42
【问题描述】：

如你所见，我希望有一条线穿过画布的中心，所以我决定使用 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>

渲染代码截图：

【问题讨论】：

::after 不适用于 js/jquery，因为它不是 DOM 的元素。

标签： javascript html css pseudo-element

【解决方案1】：

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

【讨论】：