如何使用 CSS 动态地在列表项之间添加逗号?

cssweb developmentfront end technology更新于 2024/3/15 13:00:17

网站中经常使用包含多个项目的列表，用逗号分隔它们有助于提升可读性和用户体验。在列表中添加逗号的传统方法是手动添加。然而，正如您可能已经猜到的那样，这可能是一个艰巨且耗时的过程，尤其是对于长列表而言。幸运的是，使用 CSS 动态地向项目列表中添加逗号是一个绝佳的解决方案。

~ 选择器

CSS 中的 ~ 选择器用于选择 HTML DOM 中所有位于所需元素之前的元素。

语法

el1~el2 {
    css declarations
}

在此上下文中，"el1"表示同类组件的前一个组件，而"el2"表示位于共享父单元中的后续同类组件。

例如，~ ul 选择所有位于 <a> 之前的 <ul> 元素。元素。

::before 选择器

::before 选择器用于在所选元素之前插入内容。

语法

el::before {
    css declarations
}

此处，el 是 ::before 伪元素将应用到的元素。::before 伪元素前面有两个冒号 (::)，以区别于 :before 伪类，后者是一种较旧的语法，但仍支持向后兼容。

例如，p::before 将在 <p> 元素之前添加内容。

方法

使用 CSS 动态在项目列表之间添加逗号的方法涉及使用名为 ::before 的伪元素，该元素可以在所选元素之前插入内容。在本例中，我们定位到 ul 列表中的 li 元素，并使用 ::before 选择器在每个元素前添加逗号。此方法使我们能够避免手动向列表中添加逗号，并使用 CSS 自动化此过程。此外，我们可以使用 display 和 flex-wrap 属性来排列列表项，并确保它们在必要时换行。最后，我们可以使用 JavaScript 动态添加和删除列表项。

示例

以下代码使用 CSS 在列表项之间动态添加逗号。该文档包含一个标题、一个带有 CSS 属性的 style 标签、一个包含标题的 div 标签、一个类名为"item"的列表项以及两个用于添加和删除列表项的按钮。style 标签包含一个伪元素选择器，用于在除第一个列表项之外的每个列表项前添加逗号和空格。script 标签定义了两个函数:addItem 函数添加一个带有文本"Item!"的新列表项，removeItem 函数随机选择一个列表项并将其删除。

<!DOCTYPE html>
<html>
<head>
   <style>
      .items {
         display: flex;
         list-style: none;
         padding: 0;
         flex-wrap: wrap
      }
      .item~.item::before {
         content: ", ";
      }
   </style>
</head>
<body>
   <h4>How to Add Commas Between a List of Items Dynamically with CSS?</h4>
   <div>
      <ul class="items">
         <li class="item">Eggs</li>
         <li class="item">Bread</li>
      </ul>
   </div>
   <div>
      <button onclick="addItem()">Add Item</button>
      <button onclick="removeItem()">Remove Item</button>
   </div>
   <script>
      function removeItem(){
         let items=document.querySelectorAll('.item');
         let idx=Math.floor(Math.random()*items.length);
         items[idx].remove();
      }
      function addItem(){
         let itemList=document.querySelector(".items");
         let item=document.createElement("li");
         item.innerText="Item!";
         item.className="item";
         itemList.append(item);
      }
   </script>
</body>
</html>

结论

总而言之，利用 CSS 在文章串中动态添加逗号是一种巧妙的策略，能够提升网页的可读性和视觉吸引力。通过运用 CSS 中鲜为人知的技巧，网页设计师能够为看似微不足道的问题找到精妙的解决方案。通过发挥想象力并积极探索新的可能性，您可以利用 CSS 的强大功能，打造出引人入胜、艺术感十足的网页设计，给观众留下深刻的印象。因此，请毫不犹豫地尝试您掌握的各种工具和技术，充分发挥您的网页开发专业知识的潜力。