如何在Contact Form 7复选框选项中加粗指定文本

方法一：直接在短代码中嵌入HTML标签 #

Contact Form 7支持在选项文本中直接使用HTML标签，只需将需要加粗的文本用<strong>标签包裹即可，修改后的短代码如下：

[checkbox* Location use_label_element exclusive "<strong>Michigan City Library</strong> 100 E 4th St, Michigan City, IN 46360" "<strong>La Porte Library</strong> 904 Indiana Ave, La Porte, IN 46350"]

这种方法无需额外CSS，操作简单直接，能精准实现特定文本加粗的需求。

方法二：通过CSS精准定位（无需修改文本内容） #

如果不想改动短代码里的文本内容，可以借助CF7生成的DOM结构，结合CSS伪元素实现：

1. 先修改短代码，给每个选项添加唯一标识（用于CSS定位）：

[checkbox* Location use_label_element exclusive "mc-lib:Michigan City Library 100 E 4th St, Michigan City, IN 46360" "lp-lib:La Porte Library 904 Indiana Ave, La Porte, IN 46350"]

这里的mc-lib:和lp-lib:会作为复选框的value属性值，方便后续CSS选择器定位。

2. 添加以下CSS代码：

/* 隐藏原标签文本，预留位置 */
.wpcf7-list-item-label[for*="mc-lib"],
.wpcf7-list-item-label[for*="lp-lib"] {
  visibility: hidden;
  position: relative;
}

/* 生成加粗的图书馆名称 */
.wpcf7-list-item-label[for*="mc-lib"]::before {
  content: "Michigan City Library";
  font-weight: bold;
  visibility: visible;
  position: absolute;
  left: 0;
}

/* 生成地址文本 */
.wpcf7-list-item-label[for*="mc-lib"]::after {
  content: " 100 E 4th St, Michigan City, IN 46360";
  visibility: visible;
  position: absolute;
  left: 160px; /* 根据实际显示宽度调整 */
}

/* La Porte Library 样式设置 */
.wpcf7-list-item-label[for*="lp-lib"]::before {
  content: "La Porte Library";
  font-weight: bold;
  visibility: visible;
  position: absolute;
  left: 0;
}

.wpcf7-list-item-label[for*="lp-lib"]::after {
  content: " 904 Indiana Ave, La Porte, IN 46350";
  visibility: visible;
  position: absolute;
  left: 140px; /* 根据实际显示宽度调整 */
}

这种方法适合需要保持短代码文本原始性，或后续需要单独调整样式的场景。

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