[CSS] Changing the color of the tag's hash symbol (::first-letter)

[Lukas]

I’d like to make the leading hash (pound) symbol (‘#’) in tags less distracting.

I tried the following to change the color of the hash symbol:

.node-tag
{
  display: inline-block;
}
.node-tag::first-letter
{
  color: rgb(0, 255, 0); /* Bright green as demonstration. */
}

This, however, colors the first two characters (hash symbol + first actual letter):

Does anyone have an idea why that happens and how I can circumvent it?

Cheers,
Lukas

[Craig_Oliver]

It looks like this might be part of CSS by design. From the docs:

The first letter of an element is not always trivial to identify:

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.

(emphasis mine.)

[Chris_Kunicki]

I don’t have a specific solution to your problem. However, if you want to replace specific tags, you can do something like this where the tag is #p1:

a[title="Filter #p1"]::before {
  visibility: visible;
  border-left: solid red;
  float:left;
  height:14px;
  margin-top:2px;
  content: " ";
}

a[title="Filter #p1"] {
  visibility: hidden;
}

[Lukas]

@Craig_Oliver It didn’t even cross my mind that this could be by design!

@Chris_Kunicki I’d really only like to change the color of the hash symbol on all tags. But I am definitely saving your code example - didn’t know you could do that!

Thanks to the both of you for taking the time to reply!

[Dean_Morrison]

nice code Chris, how do you align the text when you have #p1 at the start of a line with having #p1 at the end of the text on a line?