In order to avoid creating nested flexbox containers, we are going to use Using "order" - Thanks To Ilya StreltsynĪs you can see, we get the following three elements / pseudo-elements:Īnd while the :after pseudo-element is the 3rd and last child, its order gets the browser to render it visually as the 2nd child: Setup the DD (cast) element to shrink, allowing for the dots to fill up The DT and DD elements, VISUALLY, even through it is PHYSICALLY the last NOTE: We are using "order: 2" to place the ":after" element IN BEWTEEN Setup the DT (character) element to shrink, allowing for the dots to fillĭefine the pseudo-element as a SIBLING to both the DT and DD elements.Ĭonfigure it to grow, taking up all the free space with dots. Setup the DT (character), DD (cast), and pseudo-element items as a Revisiting: Styling A Movie Cast List Using A Definition List And Flexbox
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |