Is there a way to center content vertically, which is generated by a ::after pseudo-element, within the parent element even when the ::after pseudo-element has a float: right declaration?
The CSS code I have looks like this:
.label-dot::after, .label-dot-1::after {
content: "";
border-radius: 50%;
display: inline-block;
float: right;
height: 10px;
width: 10px; }
.label-dot-1::after {
background-color: #66c2a5; }
This CSS is applied to the test HTML below:
<div style="width: 500px; background-color: red;">
<div class="label-dot-1">Neato</div>
</div>
You can view the test case on JSFiddle here: http://jsfiddle.net/EvilClosetMonkey/jR9sV/
As you can see, the green dot aligned to the top and right of the div. How can I make it align with the vertical center instead, similar to how the text behaves?
UPDATE
I have two additional pieces of information:
- I do know the height of the parent
div, although I forgot to mention that before. - I am open to options other than using
float, but the 'dot' needs to be aligned to the right side.
A revised fiddle with updated heights can be found here: http://jsfiddle.net/EvilClosetMonkey/jR9sV/2/