如何用CSS修改含多子元素的WordPress按钮内指定文本

针对无法修改HTML结构、仅能通过CSS替换目标文本的场景，可以采用视觉隐藏原文本+伪元素替换的方案实现，具体操作如下：

• 给父容器.sl-count设置相对定位，同时将父容器文字颜色设为透明，隐藏原有的“Me gustas”文本：

  .sl-count {
    position: relative;
    color: transparent;
  }
  

• 恢复子元素的文字颜色，避免.recommend-title和.count-num随父容器变成透明：

  .sl-count .recommend-title,
  .sl-count .count-num {
    color: #000; /* 替换为你实际需要的文字颜色 */
  }
  

• 用::after伪元素添加目标替换文本，通过绝对定位将其放到原文本的位置：

  .sl-count::after {
    content: "你的新文本"; /* 替换成你想要的内容 */
    position: absolute;
    color: #000; /* 和子元素颜色保持一致 */
    /* 根据实际布局调整位置：如果是横向排列，用left/right；纵向排列用top/bottom */
    left: auto;
    right: 0;
    /* 示例：若原文本在子元素下方，可添加top: 20px; 具体数值依布局调整 */
  }
  

补充说明 #

如果原文本和子元素是横向排列，可调整伪元素的left/right值或使用display: inline-block对齐；若是纵向排列则调整top/bottom值。该方案通过颜色隐藏父容器文本，不会影响子元素的正常显示，是这类场景下最实用的CSS替代方案。

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