[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:

.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):
image

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

Cheers,
Lukas

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

(emphasis mine.)

1 Like

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;
}
1 Like

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

1 Like

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?