Frissítően egyszerű (mégis ravasz) módszer a függőleges idővonal létrehozására egy egyenes, szemantikus rendezetlen lista használatával (
- ) Peter Coopertől.
ol ( list-style-type: none; ) li ( position: relative; margin: 0; padding-bottom: 1em; padding-left: 20px; ) li:before ( content: ''; background-color: #c00; position: absolute; bottom: 0px; top: 0px; left: 6px; width: 3px; ) li:after ( content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32' focusable='false'%3E%3Ccircle stroke='none' fill='%23c00' cx='16' cy='16' r='10'%3E%3C/circle%3E%3C/svg%3E"); position: absolute; left: 0; top: 2px; height: 12px; width: 12px; )Peter az ötletet azután kapta meg, hogy látta megvalósítani a BBC News weboldalán. Ez a verzió rendezett listával (
- ) elemnek van értelme, ha az események meghatározott sorrendjével foglalkozunk. Peter's take rendezetlen listát használ, ami ugyanolyan jó lehet.
) rendelkezik egy: előtag pszeudo-elemmel, amely tartalmilag üres, de 2 pixel szélességű, piros háttérszínnel van jelölve. Ez létrehozza a „vonalat” mindegyik előtt- . A további stílus ezt az álelemet / vonalat pozícionálja.
Hosszú történet, ez egy szokásos HTML lista (a BBC használja
de mentem vele
), ahol minden listaelem (
Az SVG intelligens, jelölést takarékos hozzáadása :afteraz álelemhez Saadat jóvoltából. Az eredeti változat további háttértulajdonságokat tartalmazott az SVG méretének megőrzésére és az ismétlődés megakadályozására, de nem találtam őket teljesen szükségesnek, legalábbis ebben az összefüggésben. Azonban vegye figyelembe, hogy az SVG jelölés helyesen használja az focusableattribútumot annak megakadályozására, hogy szerepeljen a billentyűzet fülén. Szép mozdulatok! ?
Itt az eredmény:
Lásd
: Geoff Graham (@geoffgraham)
a CodePen oldalán a Toll rendezetlen lista folyamatos függőleges idővonalként .
Forrás