Senarai Tidak Teratur Sebagai Garis Masa - Trik CSS

Anonim

Kaedah yang sangat menyegarkan (namun licik) untuk membuat garis masa menegak menggunakan senarai tanpa susunan semantik lurus ke atas (

    ) 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 mendapat idea itu setelah melihatnya dilaksanakan di laman web BBC News. Versi itu disenaraikan dengan senarai teratur (

      ) elemen yang masuk akal jika kita berurusan dengan susunan peristiwa tertentu. Pengambilan Peter menggunakan senarai yang tidak tersusun yang mungkin juga sesuai.

      Singkat cerita, ini adalah senarai HTML standard (BBC menggunakan

        tapi saya ikut
          ) di mana setiap item senarai (
        • ) mempunyai: sebelum elemen pseudo yang kosong berdasarkan isi tetapi ditandakan selebar 2 piksel dengan warna latar merah. Ini mewujudkan 'garisan' sebelum masing-masing
        • . Gaya lebih lanjut kemudian meletakkan elemen / garis pseudo ini.

      Penambahan SVG yang bijak dan menjimatkan markup ke dalam :afterelemen pseudo adalah milik Saadat. Versi asal merangkumi sifat latar belakang tambahan untuk mengandungi ukuran SVG dan menghalangnya berulang, tetapi saya tidak menganggapnya sangat diperlukan, sekurang-kurangnya dalam konteks ini. Namun, perhatikan bahawa markup SVG menggunakan focusableatribut dengan betul untuk menghalangnya daripada disertakan pada tab papan kekunci. Pergerakan yang bagus! ?

      Inilah hasilnya:

      Lihat
      Senarai Tidak Beratur Pen sebagai Garis Masa Vertikal Berterusan oleh Geoff Graham (@geoffgraham)
      di CodePen.

      Sumber