如何为input的valid/invalid状态设置对应:after伪元素样式？原代码失效原因

我通过form::after添加了*标记，想要在input:valid和input:invalid状态下修改该标记的样式，但使用以下CSS代码无法生效，请问原因是什么？

原CSS代码 #

form::after {
    content: "*";
}

#fname:invalid~::after {
    background: red;
    border-color: yellow;
}

#fname:valid~::after {
    background: rgb(3, 183, 168);
    border-color: rgb(9, 9, 0);
}

原HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <form action="/action_page.php" id="frm">
        <label for="fname">First name:</label><br>
        <input required type="text" id="fname" value=""><br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

原因分析 #

1. 兄弟选择器~的匹配逻辑错误 #

~选择器只能匹配当前元素之后的同级兄弟元素，但form::after是form元素生成的伪元素，属于form的内部子元素（渲染在form内容末尾），并不是#fname的同级兄弟节点。你写的#fname:invalid~::after相当于在找#fname后面的伪元素，而这个伪元素根本不存在于#fname的同级节点里，自然无法匹配。

2. 伪元素的归属关系限制 #

form::after是依附于form的伪元素，它的样式只能通过form本身或者form的父元素来控制，无法直接通过内部子元素input的状态关联——CSS原生没有“子元素状态影响父元素伪元素”的选择器逻辑（旧版CSS中）。

解决办法 #

方法1：使用:has()选择器（现代浏览器支持） #

CSS的:has()选择器可以让父元素根据子元素的状态设置样式，直接关联form和内部input的状态：

form::after {
    content: "*";
    /* 基础样式让标记可见 */
    display: inline-block;
    margin-left: 5px;
    padding: 0 4px;
    border: 1px solid transparent;
}

/* 当form内部#fname处于invalid状态时修改伪元素样式 */
form:has(#fname:invalid)::after {
    background: red;
    border-color: yellow;
}

/* 当form内部#fname处于valid状态时修改伪元素样式 */
form:has(#fname:valid)::after {
    background: rgb(3, 183, 168);
    border-color: rgb(9, 9, 0);
}

方法2：添加真实DOM节点替代伪元素（兼容旧浏览器） #

如果需要兼容不支持:has()的旧浏览器，可以把*标记改成真实的<span>元素，放在input旁边，再用兄弟选择器控制：

修改后的HTML

<form action="/action_page.php" id="frm">
    <label for="fname">First name:</label><br>
    <input required type="text" id="fname" value="">
    <span class="required-mark">*</span><br><br>
    <input type="submit" value="Submit">
</form>

对应CSS

.required-mark {
    display: inline-block;
    margin-left: 5px;
    padding: 0 4px;
    border: 1px solid transparent;
}

#fname:invalid + .required-mark {
    background: red;
    border-color: yellow;
}

#fname:valid + .required-mark {
    background: rgb(3, 183, 168);
    border-color: rgb(9, 9, 0);
}

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