目前为止的最佳尝试

Question

目前为止的最佳尝试

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

还是有一个摆脱空间的好方法？如果必须，我将使用负边距将逗号拉回到前一个单词。

Answer 1

您在元素之间看到的空间由父元素font-size确定。内联元素尊重标记中的空格。

One way要删除此内容，请将父元素的font-size设置为0，然后重置子元素的font-size。有关替代方法，请参阅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 s中对伪元素应用负左边距。 -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

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

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

如何保留空格并使用 ::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> s </dd>之间添加逗号

目前为止的最佳尝试

3 个答案: