CSS :after pseudo class with 2 icons as content

I was again working on my post-it cards for a Kanban board. Now I wanted to display dots (red and green) depending on some attributes of the task. Let’s say there should be a red dot for a task involving testing and a green dot on a card involving documentation. Of course if the task involves both testing and documentation, I’d like to see two dots – a red one and a green one.

To make it even more complex, I want to display a pin icon on top of the card (whereas the dots would be at the botton).

First, I implemented the pin with an :after pseudo class:

.card .cardTitle:after {
    content: url("pin.png");
    left: 100px;
    position: absolute;
    top: -10px;
}

This just adds a pin icon after the title and positions it in the middle of the top part of the card.

Now I wanted to use the same trick and add a dot for tasks involving testing:

.card.test .cardTitle:after {
    content: url("red_dot.png");
    left: 84px;
    position: absolute;
    bottom: 0px;
}

Now the pin was gone and insted of the pin, I could see a dot. Ok, so it looks like I cannot use 2 :after pseudo class on the same object.
The solution was to use another pseudo class:

.card.test .cardTitle:before {
    content: url("red.png");
    left: 84px;
    position: absolute;
    bottom: 0px;
}

Since we’re positioning absolutely, we do not care whether the dot is added using the :after or the :before pseudo class.
This works well as long as I want to display either a green OR a red dot. If I want to display both and define something like this:

.card.test .cardTitle:before {
    content: url("red.png");
    left: 84px;
    position: absolute;
    bottom: 0px;
}
.card.documentation .cardTitle:before {
    content: url("green.png");
    left: 116px;
    position: absolute;
    bottom: 0px;
}

Well, this doesn’t work because it will only display the green one instead of both dots.
It took me while until I figured out, I can just define all combinations and use two URLs in my content:

.card.test .cardTitle:before {
    content: url("red.png");
    left: 84px;
    position: absolute;
    bottom: 0px;
}
.card.documentation .cardTitle:before {
    content: url("green.png");
    left: 116px;
    position: absolute;
    bottom: 0px;
}
.card.test.documentation .cardTitle:before {
    content: url("red.png") url("green.png");
    left: 84px;
    position: absolute;
    bottom: 0px;
}

And it worked ! Of course if you have more dot colors, the number of combinations just inreases exponentially!

Facebook

Twitter

Google +