Disable Selectability For A Space

I have the following HTML code: Now I want the user to be able to select the ls, but not the $ (including the space). While this works for the $ character, it does not work for th

Solution 1:

Try this, created on @ajreal's comment.

.meta {
  user-select: none;
}
.bash{
  display: inline-block;
}
.meta:after {
  content: '\00a0';
}

<spanclass="meta">$</span><spanclass="bash"> ls</span>

Solution 2:

First, the ::first-letter selector works only for block container boxes (won't work for inline elements).

Second, it seems it can't select a space. If you set the spans to inline-blocks, still the first letter that gets colored red is "l" and not a space.

.meta, .bash {
  display: inline-block;
}

.meta {
  user-select: none; 
}

.meta + .bash::first-letter {
  user-select: none;
  background-color: #ff0000;
}

<spanclass="meta">$</span><spanclass="bash"> ls</span>