如何解决WordPress站点CSS替换文本重复显示的问题

问题根源 #

你当前的CSS选择器错误地给目标容器的所有后代元素添加了伪元素，加上容器visibility:hidden的继承特性，导致原文本和伪元素文本出现重复显示的情况。

正确解决方案 #

直接定位到承载原文本的<h2>元素，隐藏其原有内容后再添加伪元素替换：

方案一（基于visibility）

/* 隐藏h2的原有文本 */
.elementor-element-4756de9 .elementor-heading-title {
    visibility: hidden;
    position: relative;
}
/* 在h2上添加替换文本的伪元素 */
.elementor-element-4756de9 .elementor-heading-title:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "We are closed for the season";
    /* 继承原h2的字体样式，确保显示大小一致 */
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

方案二（基于font-size，更稳妥）

如果visibility继承出现异常，可改用字体大小隐藏原文本：

/* 把原文本字体设为0，隐藏内容 */
.elementor-element-4756de9 .elementor-heading-title {
    font-size: 0;
    position: relative;
}
/* 恢复伪元素的字体大小，显示替换文本 */
.elementor-element-4756de9 .elementor-heading-title:after {
    font-size: 24px; /* 可替换为原h2实际的字体大小，或者用initial继承 */
    position: absolute;
    top: 0;
    left: 0;
    content: "We are closed for the season";
}

为什么原来的代码会重复？ #

你之前的.elementor-element-4756de9 :after是后代选择器（注意选择器里的空格），会给容器内所有子元素都添加伪元素；同时容器的visibility:hidden会被子元素继承，但伪元素单独设置visibility:visible后，每个符合条件的子元素都会生成一个替换文本，最终导致重复显示。

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