Tribute page: change <ul> bullets to a unicode, then repeat on the same page with a new unicode

HTML-CSS
1

While working on my tribute page for a famous magician I thought it would be cool to use card symbols (clubs, hearts, spades, diamonds) instead of bullets in an unordered list.

I can get rid of all bullets and add a unicode to the beginning of each string inside an li.

list-style-type: none;
li &#9827 content /li

Or I can change the bullet itself by doing this.

li:before { content: ‘\2663’; }

But I don’t know how to change the li:before to a different content (i.e. a new playing card symbol) and make a new list on the same page. So I could have a list starting with clubs, then a new list starting with hearts etc.

And ‘that’, with your help is what I would like to do.

2

instead of li:before, use a class selector with the pseudoelement, .myClass:before

3

Ok so,

li:before {
  content: "\2665";
  margin-left: -20px;
  margin-right: 10px;
  color: red;
}

Puts a red heart in front of all li’s.

but

.heart:before {
  content: "\2665";
  margin-left: -20px;
  margin-right: 10px;
  color: red;
}

with
li class=“heart:before”
doesn’t seem to work.

What am I doing wrong?

4

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

5

why class name heart:before?

don’t give class names that remember pseudoelements, seems just really bug prone

edit: and the colon is not a valid character in a class name:

6

Alright,

So how do I reference your suggestion of “.myClass:before” in my html?

7

you use that as selector in your css

you used li:before, now you use a class name instead of an element name, if class is myClass you write .myClass:before selecting the pseudoelement for that class