如何用CSS移除WooCommerce必填输入框的省略号？

我来帮你搞定这个困扰！你之前尝试用border: none移除省略号却没生效，核心原因很明确：WooCommerce（或你的主题）里的必填字段省略号，并不是来自标签的边框，而是通过::after伪元素生成的文本内容，所以针对border的CSS自然起不到作用。

正确的解决方案 #

你需要直接瞄准生成省略号的伪元素操作，以下两种方法任选其一：

1. 精准针对WooCommerce结账页面的必填字段（推荐，避免影响其他页面的标签）：

.woocommerce-checkout .form-row .required abbr::after {
    /* 方法一：直接隐藏伪元素 */
    display: none !important;
    /* 方法二：清空伪元素的内容 */
    /* content: "" !important; */
}

2. 全局移除所有标签的伪元素内容（如果不需要任何的后缀标记）：

abbr::after {
    content: none !important;
}

为什么之前的代码无效？ #

你之前的CSS：

abbr, abbr[title] { border: none !important; border-bottom: none !important; }

只处理了标签的边框样式，但那个烦人的省略号是通过伪元素::after的content属性生成的文本，和边框完全无关。你可以打开浏览器开发者工具（按F12），选中那个标签，查看它的::after伪元素样式，就能看到content: "…"（或类似省略号字符）的设置，这才是问题的根源。

额外提示 #

如果还是不生效，检查一下你的CSS选择器优先级是否足够——可以给选择器加上更多父元素类（比如.woocommerce-checkout）来提高权重，确保你的样式能覆盖WooCommerce的默认样式。

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