如何使用CSS选中冒号前的多行文本并单独设置样式

纯CSS无法实现这个需求。
CSS选择器的匹配目标是DOM元素节点，没有原生能力直接选中、拆分普通文本节点内的部分内容，不存在可以精准匹配「每个li里冒号前文本」的纯CSS写法。所有号称纯CSS实现的方案都有极强的局限性：要么靠固定宽度截断，适配不了长短不一的标签文本；要么需要提前在HTML里加自定义属性存标签内容，本质还是要改动原始HTML结构，没法直接适配你现有的无标签包裹的代码。

不需要你手动给每一行li加span标签，只需要加一段很短的JS脚本，页面加载时自动遍历所有列表项完成结构拆分，一次配置自动处理所有数据，数据量再大也不会增加手动维护成本：

• 首先定义冒号前文本的样式，按需调整属性即可：

/* 冒号前文本的自定义样式 */
li > .list-label {
  font-weight: 700;
  color: #165DFF;
}

• 加一段自动处理DOM的脚本，放在页面末尾或者DOM加载完成的回调里即可：

document.addEventListener('DOMContentLoaded', () => {
  // 可以根据实际业务修改选择器范围，避免影响其他无关列表
  const listItems = document.querySelectorAll('ul li')
  listItems.forEach(item => {
    const fullText = item.textContent.trim()
    const splitIndex = fullText.indexOf(':')
    if (splitIndex < 0) return
    // 如果不想给冒号本身加样式，把下面slice的+1去掉即可，冒号会归到后方内容
    const labelContent = fullText.slice(0, splitIndex + 1)
    const valueContent = fullText.slice(splitIndex + 1)
    item.innerHTML = `<span class="list-label">${labelContent}</span>${valueContent}`
  })
})

这个方案处理后，冒号后的内容是独立的普通文本节点，完全不会继承给.list-label设置的特殊样式，完全符合需求。

不要尝试用CSS伪元素拼接内容的方案实现，这类方案需要把每个标签的文本硬编码在CSS里，维护成本比手动改HTML还高，完全不适合数据量大的场景。

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