Danh sách không có thứ tự như một dòng thời gian - Thủ thuật CSS

Anonim

Một cách đơn giản (nhưng xảo quyệt) mới mẻ để tạo dòng thời gian dọc bằng cách sử dụng danh sách không có thứ tự theo ngữ nghĩa thẳng lên (

    ) từ 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 có ý tưởng sau khi thấy nó được thực hiện trên trang web BBC News. Phiên bản đó đi kèm với một danh sách có thứ tự (

      ) phần tử có ý nghĩa nếu chúng ta đang xử lý một thứ tự sự kiện cụ thể. Peter's take sử dụng một danh sách không có thứ tự mà cũng có thể là như vậy.

      Một câu chuyện ngắn, đó là một danh sách HTML tiêu chuẩn (BBC sử dụng

        nhưng tôi đã đi với
          ) nơi mỗi mục danh sách (
        • ) có: trước phần tử giả có nội dung trống nhưng được đánh dấu là rộng 2 pixel với màu nền đỏ. Điều này tạo ra 'dòng' trước mỗi
        • . Sau đó, tạo kiểu thêm sẽ định vị phần tử / dòng giả này.

      Việc bổ sung thông minh, tiết kiệm đánh dấu của SVG vào :afterphần tử giả là đặc quyền của Saadat. Phiên bản gốc bao gồm các thuộc tính nền bổ sung để chứa kích thước của SVG và ngăn nó lặp lại, nhưng tôi không thấy chúng hoàn toàn cần thiết, ít nhất là trong bối cảnh này. Tuy nhiên, hãy lưu ý rằng đánh dấu SVG sử dụng đúng cách focusablethuộc tính để ngăn nó được đưa vào tab bàn phím. Những bước đi tốt đẹp! ?

      Đây là kết quả:

      Xem
      Danh sách không có thứ tự bút dưới dạng Dòng thời gian dọc liên tục của Geoff Graham (@geoffgraham)
      trên CodePen.

      Nguồn