Archived topic
CSS dot
7 replies · Started by Maria on July 14, 2018
Hey,
after the update the CSS
.dotrot {
height: 15px;
width: 15px;
background-color: #d42f2f;
border-radius: 50%;
display: inline-block;
}
doesn´t work.
What am I doing wrong? I would like to define three different colored dots (it should be a marker behind the text).
I'm grateful for any help.
Hi there,
Sorry not quite sure if I understand.
Which elements are you trying to apply the CSS to?
I don't think dotrot class exist in the theme before or after the update.
Let me know :)
Hi Leo,
I thought I can give classes in the CSS itself.
What would be the right class to create different colored points (circles)?
I would like a sort of rating system without a plugin. Thought with points it is easiest.
- text .... red point
- text .... green point
- etc.
Hi there,
would this 'dot' be after the text in a list? Or within a paragraph?
Hi David,
yes, I would use the dots in a listing.
What did I need in a (for example) packing list and what not.
I would like to have three different colored dots.
Ok, you could use this mark-up:
<ul>
<li class="dot green">Line with green dot</li>
<li class="dot yellow">Line with amber dot</li>
<li class="dot red">Line with red dot</li>
</ul>
With this CSS:
.dot:after {
content: "●";
margin-left: 10px;
font-size: 20px;
}
.dot.green:after {
color: green;
}
.dot.yellow:after {
color: yellow;
}
.dot.red:after {
color: red;
}
Omg - It works - just as I imagined.
Many many thanks!!
Thats great to hear. And you're very welcome.