use opacity on only one element in a block in css-CodePudding

Can you I use opacity only on one property of element?

nav ul li::after {
    background: grey;
    content: "";
    height: 3px;
    width: 30%;
    position: absolute;
    left: 0;
    bottom: -10px;
    transition: 0.5s;
    box-shadow: 15px 0px 5px 2.5px #0ff;
    opacity: 0;
}

Can I use opacity only on the box-shadow???

CodePudding user response：

No. Opacity applies to the element it applies to (and affects all its children). It can't be applied to specific properties (and border-shadow is a property, not an element).

You can however specify a translucent colour for the shadow.

box-shadow: 15px 0px 5px 2.5px rgba(0, 255, 255, 0.5);

CodePudding user response：

box-shadow: 15px 0px 5px 2.5px rgba(15, 240, 255, 0.5);

0.5 being the opacity.