Firefox中CSS :after伪元素对带accesskey的按钮为何无效？

为什么CSS样式对单选/复选框、提交按钮无效？ #

<input>（包括单选、复选框、提交按钮）属于替换元素——这类元素的渲染内容由浏览器或外部资源控制，不属于文档流中的普通文本内容。CSS的:before/:after伪元素仅能作用于非替换元素（比如<label>、<div>），无法在替换元素上生成额外内容，这就是样式只对label生效的核心原因。

解决方案 #

优先方案：纯CSS实现（调整HTML属性位置） #

利用<label>与表单元素的关联特性，将accesskey属性转移到对应的<label>上，既不影响快捷键触发功能（按快捷键会自动聚焦到关联的表单元素），又能让CSS伪元素正常生效。

修改后的HTML示例（以单选按钮为例）

原代码：

<label><input type="radio" name="srch-match-cn" value="E" checked="checked" id="srch-match-cn-E" accesskey="1"/>genau</label>

修改为：

<label accesskey="1"><input type="radio" name="srch-match-cn" value="E" checked="checked" id="srch-match-cn-E"/>genau</label>

提交按钮的处理

给提交按钮设置id，用label关联并添加accesskey：

<input type="submit" name=".submit" value="Suchen" id="search-submit" />
<label accesskey="c" for="search-submit"></label>

配合CSS调整label位置（避免空标签占位问题）：

[accesskey]:after {
    margin-left: 0.5em;
    content: "[" attr(accesskey) "]";
    font-family: monospace;
}
/* 调整提交按钮关联label的样式 */
label[for="search-submit"] {
    margin-left: 0.2em;
}

备选方案：JavaScript动态生成提示 #

如果不想改动现有HTML结构，可通过脚本自动为带accesskey的表单元素添加提示标签：

// 遍历所有带accesskey的input和button元素
document.querySelectorAll('input[accesskey], button[accesskey]').forEach(el => {
    const hint = document.createElement('span');
    hint.textContent = `[${el.accessKey}]`;
    hint.style.marginLeft = '0.5em';
    hint.style.fontFamily = 'monospace';
    // 将提示插入到元素后方
    el.parentNode.insertBefore(hint, el.nextSibling);
});

该脚本会自动处理所有符合条件的表单元素，无需手动修改HTML。

内容的提问来源于stack exchange，提问作者U. Windl