![]() ![]() Also note that we add some blur around the edge of each dot (0.5px) for anti-aliasing. ![]() The background size is three times as wide as the dot to create adequate space between them. We space repeat the background along the x-axis ( background-repeat: space no-repeat) to prevent any dot from being clipped at the middle and positioned on the bottom. We create the dots using a radial-gradient background. So if you’re sure that won’t happen, and your viewers use modern browsers this might be the optimal solution. Then the ::after pseudo element will have a width of 0 and the dotted border won’t be displayed, even though the. chapter elements together fill all the space. a flex-grow of 1 while all other siblings have the default 0 will grow to the remaining space even though it has no content. We take advantage of the fact that we can order the children of our flex container however we want, and the fact that a pseudo element behaves like a child of where it was defined. I used an arbitrary 80 dots, which is enough to fill about 38em, henceīackground-image: radial-gradient(circle, currentcolor 1px, transparent 1.5px) SPANs hides the dots behind them and an ‘overflow: hidden’ on the ULĮnsures the dots do not extend outside the list. Item with dots and the SPANs are put on top. The pseudo-element fills the whole width of the list We create the dot leaders with a ‘:before’ pseudo-element attached to This is the best CSS-only solution I have found for this issue of dot leaders:
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |