你能在 ::after 上应用阴影吗？

Question

是否可以将投影滤镜应用于 ::after？

我试过了，box-shadow 适用于 ::after，但不适用于 filter:drop-shadow：

span {
  display: inline-block;
  position: relative;
  padding: 1rem;
  margin: 2rem;
  width: 100px;
  height: 40px;
  background: yellow;
}
span.shadow-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    box-shadow: 0 0 20px red;
    border: 1px solid black;
}
.shadow-filter::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    filter: drop-shadow(0 0 20px green);
    border: 1px solid black;
}

<span class="shadow-box">Box-shadow</span>
<span class="shadow-filter">Drop-shadow</span>

Answer 1

滤镜：阴影（0 0 20px 绿色）；

它在背景等图像上的工作

可以看到下面的样子，在后面加上背景色就可以了

span {
  display: inline-block;
  position: relative;
  padding: 1rem;
  margin: 2rem;
  width: 100px;
  height: 40px;
  background: yellow;
}
span.shadow-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    box-shadow: 0 0 20px red;
    border: 1px solid black;
}
.shadow-filter::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: yellow;
    filter: drop-shadow(0 0 20px green);
    border: 1px solid black;
}

<span class="shadow-box">Box-shadow</span>
<span class="shadow-filter">Drop-shadow</span>

你能在 ::after 上应用阴影吗？

Can you apply drop-shadow on ::after?

css

pseudo-element