」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 如何使用 css 製作連結的項目符號點

如何使用 css 製作連結的項目符號點

發佈於2024-07-30
瀏覽:479

這是基本思想

您在 ul 或 li 標籤下建立三個 li 清單

        
  • item 1
  • item 2
  • item 3

你使 li 標籤位置:相對;並給予一些左側填充

li {
  height: 40px;
  padding-left: 20px;
  display: flex;
  align-items: center;
  position: relative;
}

你使用 li::before css 屬性並設定左邊框。

li::before {
  content: '';
  position: absolute;
  left: -16px;
  border-left: 2px solid black;
  height: 100%;
  width: 1px;
}

Image description

現在你使用 li::after css 屬性並在它周圍畫三個圓圈

li::after {
  content: '';
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: blue;
  margin-left: -80px;
}

Image description

現在終於從第一個和最後一個列表中裁剪該行

li:first-child:before {
  top: 20px;
}

li:last-child:before {
  top: -20px;
}

結果:

Image description

完整代碼:

html:

        
  • item 1
  • item 2
  • item 3

css:

li {
  height: 40px;
  padding-left: 20px;
  display: flex;
  align-items: center;
  position: relative;
}

li::before {
  content: '';
  position: absolute;
  left: -16px;
  border-left: 2px solid black;
  height: 100%;
  width: 1px;
}

li::after {
  content: '';
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: blue;
  margin-left: -80px;
}


li:first-child:before {
  top: 20px;
}

li:last-child:before {
  top: -20px;
}

版本聲明 本文轉載於:https://dev.to/slimpython/how-to-make-linked-bullet-point-with-css-22c4?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 儘管程式碼有效,為什麼 POST 請求無法擷取 PHP 中的輸入?
    儘管程式碼有效,為什麼 POST 請求無法擷取 PHP 中的輸入?
    解決PHP 中的POST 請求故障在提供的程式碼片段中:action=''而非:action="<?php echo $_SERVER['PHP_SELF'];?>";?>"檢查$_POST陣列:表單提交後使用 var_dump 檢查 $_POST 陣列的內...
    程式設計 發佈於2024-11-23
  • 如何在 PHP 中組合兩個關聯數組,同時保留唯一 ID 並處理重複名稱?
    如何在 PHP 中組合兩個關聯數組,同時保留唯一 ID 並處理重複名稱?
    在 PHP 中組合關聯數組在 PHP 中,將兩個關聯數組組合成一個數組是常見任務。考慮以下請求:問題描述:提供的代碼定義了兩個關聯數組,$array1 和 $array2。目標是建立一個新陣列 $array3,它合併兩個陣列中的所有鍵值對。 此外,提供的陣列具有唯一的 ID,而名稱可能重疊。要求是建...
    程式設計 發佈於2024-11-23
  • 在 Go 中使用 WebSocket 進行即時通信
    在 Go 中使用 WebSocket 進行即時通信
    构建需要实时更新的应用程序(例如聊天应用程序、实时通知或协作工具)需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方!今天,我们将探讨如何在 Go 中使用 WebSocket,以便您可以向应用程序添加实时功能。 在这篇文章中,我们将介绍: WebSoc...
    程式設計 發佈於2024-11-23
  • Bootstrap 4 Beta 中的列偏移發生了什麼事?
    Bootstrap 4 Beta 中的列偏移發生了什麼事?
    Bootstrap 4 Beta:列偏移的刪除和恢復Bootstrap 4 在其Beta 1 版本中引入了重大更改柱子偏移了。然而,隨著 Beta 2 的後續發布,這些變化已經逆轉。 從 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中, offset-md-*...
    程式設計 發佈於2024-11-23
  • 大批
    大批
    方法是可以在物件上呼叫的 fns 數組是對象,因此它們在 JS 中也有方法。 slice(begin):將陣列的一部分提取到新數組中,而不改變原始數組。 let arr = ['a','b','c','d','e']; // Usecase: Extract till index ...
    程式設計 發佈於2024-11-23
  • Python 和 JSON 中單引號和雙引號可以互換使用嗎?
    Python 和 JSON 中單引號和雙引號可以互換使用嗎?
    Python 中單引號和雙引號的互換性在Python 程式設計中,單引號和雙引號在定義字串時通常可以互換。然而,這種互換性並沒有擴展到 JSON(JavaScript 物件表示法),它對字串語法有嚴格的要求。 JSON 要求所有字串值都用雙引號引起來。在 JSON 字串中使用單引號是不正確的,會導致...
    程式設計 發佈於2024-11-23
  • 如何在命令列程式的 JUnit 測試中模擬使用者輸入?
    如何在命令列程式的 JUnit 測試中模擬使用者輸入?
    使用JUnit 進行測試模擬系統在軟體測試領域,人們在處理以下問題時經常面臨模擬用戶輸入的挑戰命令列程式.當程式提示透過 System.in 輸入時,如何在 JUnit 測試中自動執行此行為? 解決方案解決方案繞過System.in 並注入模擬用戶輸入,按照以下步驟操作:建立抽象層:避免在內部直接呼...
    程式設計 發佈於2024-11-23
  • 如何使用 Java CSS 解析器來提取 HTML 文件中特定元素的 CSS 樣式?
    如何使用 Java CSS 解析器來提取 HTML 文件中特定元素的 CSS 樣式?
    Java CSS 解析器要求目標是使用 Java CSS 解析器來取得 HTML 文件中特定元素的 CSS 樣式。 解決方案CSSParser推薦一個選項是 CSSParser,一個提供錯誤回饋的強大解析器。以下是它的用法範例:import com.steadystate.css.parser.CS...
    程式設計 發佈於2024-11-23
  • 如何檢索 Python 請求中的重定向歷史記錄?
    如何檢索 Python 請求中的重定向歷史記錄?
    在Python請求中重定向URL在Python的Requests庫中,設定allow_redirects=True允許庫自動遵循HTTP重定向。但是,它不提供在重定向後檢索新 URL 的直接方法。 要存取重新導向歷史記錄,您可以利用 response.history 屬性。此屬性包含一個 Respo...
    程式設計 發佈於2024-11-23
  • 為什麼我應該使用“pip install --user”?
    為什麼我應該使用“pip install --user”?
    理解「pip install --user ...」的目的:簡化套件安裝Pip,一個強大的Python 套件管理器,讓您可以安裝來自各種來源的軟體包。預設情況下,pip 將軟體包安裝到系統範圍的目錄中,通常需要提升權限(root 存取權限)。然而,--user 標誌為那些喜歡安裝軟體包而不需要特殊權...
    程式設計 發佈於2024-11-23
  • scanf() 與 cin:C++ 輸入哪個比較快?
    scanf() 與 cin:C++ 輸入哪個比較快?
    速度比較:scanf() vs. cin問題:是真的嗎在C 程式中使用scanf()比使用cin?答案:是的,scanf() 確實比 C 中的 cin 更快,正如基準測試結果所證明的那樣。 要進行在測試中,編寫了一個簡單的程式來讀取大量數字併計算它們的 XOR 值。程式使用stdio的scanf()...
    程式設計 發佈於2024-11-23
  • 如何在不使用 Boost 的情況下在 C/C++ 中產生常態分佈的隨機數?
    如何在不使用 Boost 的情況下在 C/C++ 中產生常態分佈的隨機數?
    在C/C中產生常態分佈的隨機數問題:如何輕鬆產生隨機數在不使用Boost 的情況下遵循C 或C 的常態分佈函式庫? 答案:Box-Muller 變換Box-Muller 變換是一種廣泛使用的生成方法來自均勻隨機數產生器的常態分佈數字。它產生的值精確地遵循高斯分佈。 Box-Muller 轉換的數學公...
    程式設計 發佈於2024-11-23
  • 為什麼空 C++ 類別的大小不為零?
    為什麼空 C++ 類別的大小不為零?
    空C 類非零大小背後的謎團在C 中,空類不佔用內存的概念可能看起來像是直覺的。然而,這種假設受到特殊行為的挑戰,即使沒有任何成員的類別也表現出非零大小。為什麼會存在這種明顯的悖論? 事實證明,C 標準明確禁止物件及其對應的類別的大小為零。這項規定源自於區分可能共享相同記憶體空間的不同物件的固有要求。...
    程式設計 發佈於2024-11-23
  • 在處理許多 HashMap 物件時,如何避免「java.lang.OutOfMemoryError:超出 GC 開銷限制」?
    在處理許多 HashMap 物件時,如何避免「java.lang.OutOfMemoryError:超出 GC 開銷限制」?
    OutOfMemoryError: GC Overhead Limit Exceeded問題:我收到&&&&]我收到「java 在&&&]問題建立多個具有小文字條目的HashMap物件的程式中出現「.lang.OutOfMemoryError:超出GC 開銷限制」錯誤。 &&&]是的,有幾種程式設計...
    程式設計 發佈於2024-11-23
  • 如何確定 Windows、Mac 和 Linux 上是否啟用了超執行緒?
    如何確定 Windows、Mac 和 Linux 上是否啟用了超執行緒?
    偵測啟用的超執行緒是否存在在多執行緒應用程式中,每個實體處理器核心使用一個執行緒可確保最佳效能。為了精確確定線程數,區分物理核心和超線程核心至關重要。以下是如何在 Windows、Mac 和 Linux 上偵測超線程支援及其啟動狀態:CPUID 指令利用 CPUID 指令,我們可以收集有關處理器功能...
    程式設計 發佈於2024-11-23

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3