Question

我打算在内联块div中添加大括号：

＆＃13;

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

＆＃13;

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

＆＃13;

问题：跨度与：之前和之后的换行符和空格减少到一个空格，尽管必须没有空格。

我知道可以通过以下黑客破坏可读性或将所有内容写成一行来解决问题：

＆＃13;

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

＆＃13;

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

＆＃13;

这样做的缺点是，我不能再使用任何通用的漂亮打印机来格式化代码。

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

Answer 1

您可以在大括号中添加浮点数 - codepen demo

要实现此功能，您还需要display: inline-block块div内的所有元素。

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>

Answer 2

您可以直接将括号括在span。

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

Answer 3

您可以使用此定位，只要您的父级定位relatively，并且您的pseudos位于absolutely，就可以正确添加括号。

然后，您可以对绝对定位的子项使用top:，left:，right:和bottom:声明来相对于父母的位置进行定位：

请参阅下面的简单演示：

div.block {
  display: inline-block;
  position: relative;
  margin-left: 1em;
}
div.block span:before {
  content: "(";
  position: absolute;
  left: -0.4em;
}
div.block span:after {
  content: ")";
  position: absolute;
  right: -0.4em;
  top: 0;
}
.large {
  font-size: 30px;
}

<div class="block">
  <span>2 days ago</span>
</div>
<div class="block">
  <span>There was a question asked about</span>
</div>
<div class="block">
  <span class="large">css</span>
</div>

REM单位：

一个相对单位，就像em一样，但总是相对于“根” 元素（即：root {}）而不是像em一样使用级联。这大大简化了与相关单位的合作。〜Css tricks

是否有可能控制身体之间的空间：在内容之前和之后？

3 个答案: