CSS中可否仅为元素的box-shadow属性单独设置opacity不透明度？

CSS原生的opacity属性是作用于整个元素及其所有子内容的，无法指定仅对box-shadow这类单个样式属性生效，但有成熟的替代方案可以实现仅调整阴影透明度、不影响伪元素其他样式的需求：

方案1（推荐）：使用带alpha通道的颜色值定义阴影 #

box-shadow的颜色参数支持RGBA/HSLA格式，你可以直接把透明度写在阴影的颜色值里，完全不会影响伪元素的背景等其他样式。
你提供的代码可以修改为：

nav ul li::after {
    background: grey;
    content: "";
    height: 3px;
    width: 30%;
    position: absolute;
    left: 0;
    bottom: -10px;
    transition: 0.5s;
    /* 最后一位0.7就是阴影的透明度，可根据需求调整0~1之间的数值 */
    box-shadow: 15px 0px 5px 2.5px rgba(0, 255, 255, 0.7);
    /* 移除作用于整个伪元素的全局opacity属性即可 */
}

如果需要做阴影透明度的过渡动画，直接指定过渡box-shadow属性即可。

方案2：拆分样式到独立伪元素单独控制透明度 #

如果有特殊需求不能修改阴影的原色值，你可以把box-shadow单独放在另一个伪元素（比如::before）中，仅给这个单独的伪元素设置opacity，就不会影响原来::after的其他样式：

nav ul li::after {
    background: grey;
    content: "";
    height: 3px;
    width: 30%;
    position: absolute;
    left: 0;
    bottom: -10px;
    transition: 0.5s;
}
nav ul li::before {
    content: "";
    height: 3px;
    width: 30%;
    position: absolute;
    left: 0;
    bottom: -10px;
    transition: 0.5s;
    box-shadow: 15px 0px 5px 2.5px #0ff;
    /* 仅控制阴影所在伪元素的透明度 */
    opacity: 0.7;
}

内容的提问来源于stack exchange，提问作者Wyrden