css - 是否可以控制body和:before and :after content?之间的空间

Question

我打算在行内 block div 周围添加大括号:

div.block {
  display: inline-block;
}
div.block:before {
  content: "(";
}
div.block:after {
  content: ")";
}

<div class="block">
  <span>2 days ago</span>
</div>

问题:跨度与 :before 和 :after 内容之间的换行符和空格被减少到一个空格，尽管必须没有空格。

我知道可以通过以下 hack 破坏可读性或将所有内容写在一行中来解决问题:

div.block {
  display: inline-block;
}
div.block:before {
  content: "(";
}
div.block:after {
  content: ")";
}

<div class="block"><span
  >2 days ago</span
></div>
<div class="block"><span>2 days ago</span></div>

这有一个缺点，我不能再使用任何通用的 pretty-print 来格式化代码。

那么是否有一种 CSS 方式来控制 :before 和 :after 内容与元素主体之间的空间？

Answer 1

您可以在大括号中添加 float - codepen demo

为此，您还需要在 block div 内的所有元素上设置 display: inline-block。

div.block {
  display: inline-block;
}
div.block * {
  margin: 0;
  display: inline-block;
}
div.block:before {
  content: "(";
  float: left;
}
div.block:after {
  content: ")";
  float: right;
}

<div class="block">
  <span>2 days ago</span>
</div>