Identifier for each tag in the properties, to apply css

Use case or problem

When I see a note, I really like being able to see at first glance which categories it belongs to. This is easier with colors and emojis.
So, I like to have visual tags, with a color specific to each one.
Before updating the properties, I could apply these colors in the note metadata. With css look like this:

.tag[href="#cours"] {
  font-size: 0;
  padding: 0;
}
.tag[href="#cours"]:after {
  font-size: 9.5pt;
  font-weight: 700;
  background-color: rgba(128, 125, 124, 0.397);
  color: rgba(0, 0, 0, 0.788);
  content: "📒cours";
  padding: 3px 5px;
  border-radius: 10px;
  letter-spacing: -0.00ch;
}

I haven’t found a way to specifically identify tags text in the html of new properties.

Proposed solution

Add an identifier for each tag in the properties. Or a way to identify them with CSS.

Current workaround (optional)

I could use tags in the body of the note, but the tags no longer apply to the entire note and it no longer gives nearly the same result in queries with tags.

Related post

3 Likes