Savoy主题下Woocommerce产品分类小部件:before伪元素白圆与文字对齐问题求解

异常根因 #

样式错位是两层CSS规则冲突导致：

• Savoy 主题原生为 WooCommerce 产品分类小部件的链接元素（.cat-item > a）配置了全宽块级布局，且自带固定内边距、子分类缩进规则，没有为前置自定义伪元素预留独立排版空间
• 自定义的::before伪元素设置为行内块属性后，挤占了父链接内的文字排版宽度，触发分类文字自动换行，最终出现圆形标识在上、分类文字掉落到下方的错位效果，无法实现标识与文字水平同排的预期。

修复步骤 #

所有调整无需修改主题核心文件，直接将以下代码追加到「外观→自定义→额外CSS」面板即可生效：

• 调整父级分类链接的排版逻辑，从根源上避免文字换行

ul.children .cat-item > a {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.5;
}

• 优化原有圆形伪元素的属性，保证排版稳定

ul.children .cat-item > a::before{
  content: '';
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background-color: #ffffff;
  margin-right: 9px;
  cursor: pointer;
}

细节微调提示 #

应用代码后如果出现1-2px的垂直对齐偏差，可以在::before规则中添加transform: translateY(1px)做基线校准，匹配主题原生的文字行高；如果需要让顶级分类也应用同款圆形标识，只需要将两个规则的选择器合并为.cat-item > a和.cat-item > a::before，去掉对ul.children的限定即可。

内容的提问来源于stack exchange，提问作者Rok Polovič