12.1 #Positioning.__after-only-child-center-below `::after` centered below element's only child
Note: The reason why a nested element is needed is that I want to be able to expand the ::after element to the whole length of its generating element. But this is not possible unless I use width: -webkit-fill-available;, which I don't want. Therefore, my solution is to wrap the actual element in a ad-hoc parent which the actual element determines the width of. The ::after element can then be styled with width: border-box; to make it extend to the width of the parent of its generating element, i.e. the width of its generating element.
Markup
<style>
.__after-only-child-center-below > *::after {
width: 1em;
height: 1em;
background-color: black;
}
</style>
<div class="__after-only-child-center-below">
<div>
Lorem ipsum dolor sit amet
</div>
</div>css/modules/positioning/pseudo.css, line 1
12.2 #Positioning.polar Polar positioning
Positions direct children of the target element at the point with radius
--rho-em, and angle --theta-deg (clockwise from the upward vertical) with
respect to the closest positioned ancestor, without rotating them.
Inputs:
--theta-deg: angular coordinate (clockwise from the upward vertical)--rho-em: radial coordinate
Note: The children are position right inside the radius --rho-em. This is
because positioning them (partly) outside, exposes them to be overlapped with
other elements. This way, instead, if the positioned ancestor does not overlap,
they shouldn't overlap as well, as they are totally inside of it.
Markup
<style>
#dummy {
width: 10em;
height: 10em;
border-radius: 100%;
display: block;
content: '';
border: 1px solid black;
}
#dummy > div > div {
display: block;
content: '';
width: 1em;
height: 1em;
background-image: linear-gradient(225deg, black 50%, transparent 50%);
}
</style>
<div id="dummy" style="--rho-em: 5; position: relative;">
<div class="polar-position" style="--theta-deg: 0;"><div></div></div>
<div class="polar-position" style="--theta-deg: 1;"><div></div></div>
<div class="polar-position" style="--theta-deg: 2;"><div></div></div>
<div class="polar-position" style="--theta-deg: 3;"><div></div></div>
<div class="polar-position" style="--theta-deg: 5;"><div></div></div>
<div class="polar-position" style="--theta-deg: 8;"><div></div></div>
<div class="polar-position" style="--theta-deg: 13;"><div></div></div>
<div class="polar-position" style="--theta-deg: 21;"><div></div></div>
<div class="polar-position" style="--theta-deg: 34;"><div></div></div>
<div class="polar-position" style="--theta-deg: 55;"><div></div></div>
<div class="polar-position" style="--theta-deg: 89;"><div></div></div>
<div class="polar-position" style="--theta-deg: 144;"><div></div></div>
<div class="polar-position" style="--theta-deg: 233;"><div></div></div>
</div>css/modules/positioning/polar.css, line 1