Although there are numerous posts discussing this topic, my situation is unique.
In my case, I have a collection of colors represented by circles. When I click on a circle, I add content in the form of a check mark by including a class selector with an after pseudo-element:
The CSS for the parent circle (ul element):
.lk-color-chooser__color {
display: inline-block !important;
width: 30px !important;
height: 30px !important;
border-radius: 50% !important;
margin-right: 5px !important;
cursor: pointer !important;
opacity: 0.5 !important;
filter: alpha(opacity=50) !important;
}
The child element (li representing the circle):
.lk-color-chooser__color:last-child {
margin-right: 0 !important;
}
When a circle is selected, I apply this class:
.color__selected {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.color__selected:after{
content: "✔";
margin-left: 15%;
top: 20;
color:#000000;
}
On deselection, I remove the color__selected class and add:
.color__not_selected {
opacity: 0.5 !important;
filter: alpha(opacity=50) !important;
}
However, I am facing an issue where the added check mark is not centered inside the circle.
You can access a sample code on Plunker.