如何忽略元素首字符，仅对剩余内容应用CSS样式？

有两种简单方法可以实现你要的效果：

方法一：用<span>单独包裹首字符 #

这种方法兼容性最好，逻辑清晰：

<p><span class="colon">:</span>Welcome</p>

/* 给除冒号外的内容设置红色 */
p {
  color: red;
}
/* 给冒号单独设置黑色 */
.colon {
  color: black;
}

方法二：用CSS伪元素插入冒号 #

如果不想修改原有HTML结构，可把冒号通过::before伪元素插入，正文只保留需要变红的内容：

<p>Welcome</p>

/* 正文内容设为红色 */
p {
  color: red;
}
/* 插入黑色冒号，可按需加间距 */
p::before {
  content: ':';
  color: black;
  margin-right: 4px;
}

你之前的代码问题在哪？ #

你用p::first-letter选中首字符，但<p>:Welcome</p>里的冒号和字母连在一起时，部分浏览器会按照排版规则，把符号与后续第一个字母视为一个整体，导致两者都被::first-letter选中变红。另外你代码里的p::after是在段落右侧加冒号，和左侧的冒号需求无关，可根据实际情况保留或删除。

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