CSS 在 <dd> 之间添加逗号

Question

迄今为止的最佳尝试

dd { display: inline; margin: 0; }
dd + dd::before {
  content: ', ';
}

<dl>
  <dt>One</dt>
  <dd>one</dd>
  <dd>two</dd>
  <dd>three</dd>

  <dt>Two</dt>
  <dd>one</dd>
  <dd>two</dd>
  <dd>three</dd>
</dl>

我想使用 CSS 伪元素在 <dd> 元素之间添加逗号。上述尝试的唯一问题是每个逗号前都有一个 space。

当我使用 <li>s 执行此操作时，我可以使用 ::after 伪元素和目标 li:last-of-type 来删除最后一项的逗号，但我想不通在我的示例中找到一种方法来定位最后一个 <dd>。我认为提议的 has 选择器可能有所帮助（例如 dd:has(+ dd)）。 CSS3 中有任何解决方法吗？

或者有什么好的方法可以去掉 space？如果必须的话，我会使用负边距将逗号拉回前面的单词。

Answer 1

您在元素之间看到的 space 由父元素的 font-size 决定。内联元素尊重标记中的白色space。

One way to remove this would be to set the parent element's font-size to 0, and then reset the children element's font-size. See this answer 替代方法。

dl {
  font-size: 0;
}
dd, dt {
  font-size: 16px;
}
dd {
  display: inline;
  margin: 0;
}
dd + dd::before {
  content: ', ';
}

<dl>
  <dt>One</dt>
  <dd>one</dd>
  <dd>two</dd>
  <dd>three</dd>

  <dt>Two</dt>
  <dd>one</dd>
  <dd>two</dd>
  <dd>three</dd>
</dl>

Answer 2

您可以对 em 中的伪元素应用负左边距。 -0.2em 似乎效果不错：

dd, dt {
  font: 16px verdana;
}

dd {
  display: inline;
  margin: 0;
}

dd+dd::before {
  content: ', ';
  margin-left: -0.2em;
}

<dl>
  <dt>One</dt>
  <dd>one</dd>
  <dd>two</dd>
  <dd>three</dd>

  <dt>Two</dt>
  <dd>one</dd>
  <dd>two</dd>
  <dd>three</dd>
</dl>

Answer 3

在元素前加上 ', ' 对我来说似乎是错误的。恕我直言，它应该在元素之后，但当然不在最后一个元素上。

接下来，首先删除 space 然后再添加，这对我来说似乎有点奇怪。

如何让 space 保持原样并在使用 ::after.

的元素后简单地添加一个逗号？

你运行遇到的问题是最后一个元素仍然包含一个逗号，但是你没有遇到 , 漂浮在某处的问题，作为奖励，它就在它所在的地方应该是。

所以基本上您不希望最后一个元素匹配。幸运的是，我们有一些东西可以用于此。通过使用 :not(:last-child) 可以定位除括号内使用的选择器之外的所有元素。

dd, dt {
  font: 16px verdana;
}

dd {
  display: inline;
  margin: 0;
}

dd:not(:last-of-type)::after {
  content: ',';  
}

<dl>
  <div class="group">
    <dt>One</dt>
    <dd>one</dd>
    <dd>two</dd>
    <dd>three</dd>
  </div>

  <div class="group">
    <dt>Two</dt>
    <dd>one</dd>
    <dd>two</dd>
    <dd>three</dd>
  </div>
</dl>

CSS 在 <dd> 之间添加逗号

CSS to add commas between <dd>s

css

pseudo-element

迄今为止的最佳尝试