Heading CSS (again)

❓Help
1

I’m using headings as priority indicators 1,2,3. I’d like to make items stand out with an icon like this for heading level 3:
image

My CSS works if the item is simple, but if I add a date or a tag I get something like this:
image

I only want one icon at the front of the item. Also, don’t know where that black bullet in front of the date comes from. Here is my CSS after multiple tries.

.Node-self.is-heading3 .Node-renderedContent ::before {
visibility:visible;
content: “❸”;
color:red;
}

Help!

2

What about this CSS?

.is-heading1 .Node-renderedContent *:nth-child(1)::before {
  content: "❶";
  color: red;
}
.is-heading2 .Node-renderedContent *:nth-child(1)::before {
  content: "❷";
  color: red;
}
.is-heading3 .Node-renderedContent *:nth-child(1)::before {
  content: "❸";
  color: red;
}

and In my environment, no black bullet in front of the date.

image
image930×486 105 KB

3

Thanks!

That works for me except when I have a date at the front of the item:

image

You can also see that the mysterious “black bullet” is simply a smaller black version of the ❸ icon. If I place a space or any other character in front of the date, it works as desired.

Thoughts?

4

With this one, you don’t have to type spaces or other characters before date.

.is-heading1 .Node-renderedContent.node-line::before {
    content: "❶";
  color: red;
}
.is-heading2 .Node-renderedContent.node-line::before {
    content: "❷";
  color: red;
}
.is-heading3 .Node-renderedContent.node-line::before {
    content: "❸";
  color: red;
}

image

5

Outstanding! Thanks so much.