Ignoring first character, applying css to the remaining of an element

Is there a way to ignore the first character that resides in <p> and only apply inline styling to the remaining?

i.e. : Welcome

I want to make the word Welcome Red but the colon I want to ignore and leave it black

Is this possible?

I tried this but it makes the : and W Red.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

p::first-letter {
  color: red;
}

p::after {
  content: ':';
  float: right;
}

p {
  color: black;
}

<!-- language: lang-html -->

<p>:Welcome</p>

<!-- end snippet -->

According to the docs:

> Punctuation that precedes or immediately follows the first letter is
> included in the match. Punctuation includes any Unicode character
> defined in the open (Ps), close (Pe), initial quote (Pi), final
> quote (Pf), and other punctuation (Po) classes.
>
> &ndash; ::first-letter | MDN Web Docs

This means selecting only the colon is not possible. You can, however, use a pseudo-element to create a inaccessible colon that precedes your actual content:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-css -->

p::before {
  content: ':';
  color: black;
}

p {
  color: red;
}

<!-- language: lang-html -->

<p>Welcome</p>

<!-- end snippet -->

...or wrap the colon inside an element:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-css -->

.colon {
  color: black;
}

p {
  color: red;
}

<!-- language: lang-html -->

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

<!-- end snippet -->

If you have no other choice, and unfortunately you have to act on the scheme we adopted at the beginning, i.e. <p>:Welcome</p> then you have several options for this, I couldn't come up with another that would be more consistent.

There are many disadvantages with my concept, that is, it makes:

• SEO visibility difficult, different crawlers will not be able to cope
  with something like this.
• Doesn't allow you to select text, you just can't select it.

However, it works and displays the text correctly.

This CSS code applies styling to a paragraph element, as well as adds a pseudo-element ::after, ::first-letter and ::before with additional styling.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

p {
  font-weight: bold; /* makes the font bold */
  font-size: 2em; /* increases the font size to 2em */
  color: rgba(0, 0, 0, 0.0); /* sets the color to a transparent black using rgba */
  letter-spacing: -1em; /* sets the spacing between letters to -1em, effectively overlapping the letters */
}

p::after { /* adds text "Welcome" after the content of the paragraph element */
  content: "Welcome";
  color: black; /* sets the color of the text to blue */
  letter-spacing: 0px; /* sets the letter-spacing to 0px, removing the overlap of letters*/
}

p::first-letter { /* styles the first letter of the content of the paragraph element */
  color: red; /* sets the color of the first letter to red */
  letter-spacing: 0px; /* sets the letter-spacing to 0px, removing the overlap of letters*/
}

p::before { /* adds text ":" before the content of the paragraph element */
  content: ":";
  letter-spacing: 0px; /* sets the letter-spacing to 0px, removing the overlap of letters*/
}

<!-- language: lang-html -->

<p>:Welcome</p>

<!-- end snippet -->

If you have a better idea for eliminating unwanted text, as well as getting text selection back to work - write a comment.