[SOLVED] how to make an element unselectable but able to start selection from it

how to make an element unselectable but able to start selection from it

I want to make some <span>s in a <pre> element unselectable, but if I use the CSS property user-select: none, I won't be able to start selection from these <span>s (click at these elements and move mouse to select other lines) as well.

#pseudo-ele::before{
    content: "This line is unselectable, while you can start selection from it."
}

<pre>
This line is selectable.
<span style="user-select: none;">This line is unselectable, and you cannot start selection from it.</span>
<span id="pseudo-ele"></span>
This line is also selectable.
</pre>

I noticed that one can start selection from ::before or ::after pseudo-elements, but they are not selectable themselves. However, pseudo-elements are quite inconvenient in my situation.

Is it possible to make a normal element unselectable but able to start the selection from it? If so, how can I do that?

Solution

Instead of having an extra span separate, have it wrapping the unselectable span and overlay it with a before pseudo element that has no content but has the same dimensions.

<style>
  #pseudo-ele {
    position: relative;
    width: fit-content;
    height: fit-content;
  }
  
  #pseudo-ele::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
  }
</style>
<pre>
This line is selectable.
<span id="pseudo-ele"><span style="user-select: none; position: relative;">This line is unselectable, while you can start selection from it.</span></span>
This line is also selectable.
</pre>