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



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:

  display: inline-block;
  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?



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

(emphasis mine.)


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;
  content: " ";

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


@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!