如何让普通元素不可选中但可作为文本选区起始点？

问题背景 #

需要将<pre>元素内的部分<span>设置为不可选中，但使用user-select: none时，无法从这些<span>上点击并拖动鼠标来选中其他行的内容。虽然::before/::after伪元素能实现“自身不可选中但可作为选区起始点”的效果，但伪元素在当前场景中使用不便，希望用普通元素达成同样需求。

解决方案 #

通过给目标元素添加一个透明的伪元素覆盖层，就能实现普通元素“不可选中但可作为选区起始点”的效果：

• 给目标<span>设置user-select: none，确保其自身文本无法被选中；
• 为该<span>添加::before伪元素，设置绝对定位以覆盖整个元素区域，伪元素留空内容（不设置user-select，默认允许选中，但因无内容不会选中任何文本）。这样点击拖动时，交互触发在伪元素上，既能作为选区起始点，又不会选中目标<span>的内容，同时可以正常选中其他行的文本。

代码实现 #

CSS 代码 #

.unselectable-trigger {
    user-select: none;
    position: relative;
}

.unselectable-trigger::before {
    content: "";
    position: absolute;
    inset: 0; /* 等同于top:0; right:0; bottom:0; left:0; */
    z-index: 1;
}

HTML 代码 #

<pre>
This line is selectable.
<span class="unselectable-trigger">This line is unselectable, and you can start selection from it now.</span>
This line is also selectable.
</pre>

原理说明 #

• user-select: none直接禁用目标<span>文本的选中功能；
• 绝对定位的伪元素完全覆盖目标<span>，成为鼠标交互的载体——因为伪元素没有内容，拖动时不会选中任何内容，但浏览器会将其视为可触发选区起始的区域，从而允许从该位置开始拖动选中其他行的文本；
• position: relative确保伪元素的绝对定位基于目标<span>，不会脱离原有布局。

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