Cara sederhana yang menyegarkan (namun licik) untuk membuat garis waktu vertikal menggunakan daftar tak berurutan semantik yang lurus (
- ) dari Peter Cooper.
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 mendapatkan ide tersebut setelah melihatnya diimplementasikan di situs BBC News. Versi itu pergi dengan daftar yang dipesan (
- ) yang masuk akal jika kita berurusan dengan urutan kejadian tertentu. Peter's take menggunakan daftar tidak berurutan yang mungkin juga tepat.
) memiliki: before pseudo-element yang kontennya kosong tetapi ditandai dengan lebar 2 piksel dengan warna latar belakang merah. Ini menciptakan 'garis' sebelum masing-masing- . Gaya lebih lanjut kemudian memposisikan pseudo-elemen / garis ini.
Singkat cerita, ini adalah daftar HTML standar (BBC menggunakan
tapi saya pergi dengan
) di mana setiap item daftar (
Penambahan SVG yang cerdas dan hemat markup ke dalam :afterelemen semu adalah milik Saadat. Versi asli menyertakan properti latar belakang tambahan untuk memuat ukuran SVG dan mencegahnya terulang, tetapi saya tidak menganggapnya benar-benar diperlukan, setidaknya dalam konteks ini. Namun, perhatikan bahwa markup SVG menggunakan focusableatribut dengan benar untuk mencegahnya disertakan pada tab keyboard. Gerakan yang bagus! ?
Inilah hasilnya:
Lihat Pen
Unordered List sebagai Continuous Vertical Timeline oleh Geoff Graham (@geoffgraham)
di CodePen.
Sumber