如何不使用HTML标签修改单词颜色及仅用CSS实现文本首词（title:）加粗？

嘿，这俩问题都是纯CSS处理文本样式的经典场景，我给你拆解下可行的解法：

1. 如何在不使用HTML标签的前提下，修改单个单词的颜色？ #

得看你要改的是固定位置的单词，还是文本里特定内容的单词，分两种情况说：

情况一：修改第一个单词的颜色 #

直接用CSS的::first-word伪元素就搞定了——它会自动选中块级元素内的第一个单词（浏览器默认把空格、换行这类字符当成分隔单词的边界）：

/* 假设文本在p标签里 */
p::first-word {
  color: #ff4500; /* 示例：橙色 */
}

要是你的文本在<span>这种行内元素里，记得先把它改成块级或行内块级，不然::first-word不生效：

span {
  display: inline-block;
}
span::first-word {
  color: #1e90ff; /* 示例：蓝色 */
}

情况二：修改文本中特定内容的单词（比如固定出现的某个词） #

如果要改的是文本里反复出现的固定词（比如所有"重点"），纯CSS的话可以用伪元素+定位的思路：用::before插入带颜色的目标词，再用背景色盖住原文本里的对应单词。举个例子：
假设你的文本是 <p>这是重点内容，划重点的部分</p>，代码可以这么写：

p {
  position: relative;
  background: white; /* 确保背景能盖住原单词 */
}
p::before {
  content: "重点";
  color: #dc143c; /* 示例：深红色 */
  position: absolute;
  left: 2em; /* 自己调整到原单词的位置 */
}

不过这种方法比较局限，适合固定位置的特定单词；要是文本是动态的，可能得靠JS辅助，但纯CSS的话这是最靠谱的路子了。

2. 如何仅通过CSS样式，将文本中的首个单词（title:）设置为粗体，且不使用任何HTML标签？ #

你的示例文本是 <span>title: description</span>，刚好"title:"后面跟着空格，浏览器会把它识别成第一个单词，所以直接用::first-word就能一键加粗：

span::first-word {
  font-weight: 700; /* 或者直接写bold */
}

要是遇到有些浏览器对冒号这类特殊字符的单词识别有问题，或者"title:"后面没空格的情况，还可以用缩进+伪元素的兜底方法：

span {
  display: inline-block;
  text-indent: -3.8em; /* 缩进宽度等于"title:"的宽度，自己微调 */
  padding-left: 3.8em; /* 给伪元素留出位置 */
}
span::before {
  content: "title:";
  font-weight: bold;
  position: absolute;
  margin-left: -3.8em;
}

这个方法兼容性拉满，不管有没有空格都能生效，就是得手动调下缩进宽度，适合固定内容的文本。

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