可以在:: 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>