CSS伪元素生成的content内容能否被选中复制到剪贴板？

不存在纯CSS方案可以让::after/::before伪元素通过content生成的内容被浏览器原生选中文本、复制操作捕获。

伪元素生成的内容属于CSS渲染层附加的装饰内容，不属于DOM文本流的一部分，默认不会进入可选中、可复制的文本范围，这个行为是W3C CSS规范约定的，现有CSS属性没有提供修改该行为的入口。

如果要保留CSS控制冒号展示的逻辑，同时满足复制时携带冒号的需求，可以按以下方式实现，视觉效果和原方案完全一致：

• 放弃在伪元素content中硬编码冒号，将冒号作为.label元素内的真实内联文本节点存在，通过CSS控制其展示状态，配合user-select属性保证内容可被正常选中，代码示例：

/* 替换原有的.label::after规则 */
.label .label-colon {
  display: inline;
  user-select: text;
}

对应HTML结构：

<span class="label">用户名<span class="label-colon">:</span></span>

这种实现下，冒号是真实DOM节点的文本内容，选中文本时会和相邻.label文本一同高亮，复制时也会被正常带入剪贴板。

如果完全不允许修改HTML结构，没有纯CSS解法，只能通过JavaScript监听页面复制事件，手动往剪贴板写入的内容中追加对应冒号实现。

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