Zaman Çizelgesi Olarak Sırasız Liste - CSS Hileleri

Anonim

Düz, semantik sıralanmamış bir liste (

    ) Peter Cooper'dan. 
    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, fikrin BBC News web sitesinde uygulandığını gördükten sonra anladı. Bu sürüm sıralı bir listeyle (

      ) belirli bir olay sırası ile uğraşıyorsak mantıklı olan unsur. Peter'ın çekimi sırasız bir liste kullanır ve bu da aynı şekilde olabilir.

      Uzun lafın kısası, bu standart bir HTML listesidir (BBC,

        ama ben gittim
          ) her liste öğesinin (
        • ) içerik açısından boş olan ancak kırmızı bir arka plan rengiyle 2 piksel genişliğinde olarak işaretlenen bir: before sözde öğesine sahiptir. Bu, her birinden önce 'çizgi' oluşturur
        • . Daha fazla stil daha sonra bu sözde öğeyi / çizgiyi konumlandırır.

      :afterSözde öğeye SVG'nin akıllı, biçimlendirme tasarrufu sağlayan eklenmesi Saadat'ın izniyle yapılmıştır. Orijinal sürüm, SVG'nin boyutunu içermek ve tekrar etmesini önlemek için ek arka plan özellikleri içeriyordu, ancak bunları en azından bu bağlamda tamamen gerekli bulmadım. Ancak, SVG işaretlemesinin focusableklavye sekmesine eklenmesini önlemek için özelliği doğru şekilde kullandığına dikkat edin . Güzel Hareketler! ?

      İşte sonuç:


      CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Sürekli Dikey Zaman Çizelgesi Olarak Kalem Sırasız Listesi'ne bakın
      .

      Kaynak