Question

我正在使用css类，以便在文本开头之前有一个小空格，如下所示：

.this-text:before {
    content: "\00a0 \00a0 ";
}

此代码工作正常，它允许在文本之前填充。

当我想在文本行的末尾添加相同的内容时，问题出现了。

首先，我尝试将它们组合起来：

.this-text:before, .this-text:after {
    content: "\00a0 \00a0 ";
}

没有结果，如果我在after之后使用单独的类，也没有结果：

.this-text:after {
    content: "\00a0 \00a0 ";
}

有什么建议吗？

Answer 1

如果能够理解这一点必须有效吗？

我在:before和:after上添加了背景颜色，以查看其占用的空间。

＆＃13;

p{display: inline-block; }

.this-text::before {
    content: "\00a0 \00a0 ";
    background-color: blue;
}

.this-text::after {
    content: "\00a0 \00a0 ";
    background-color: green;
}

＆＃13;

<p class="this-text">text</p><p>text</p>

＆＃13;

Answer 2

您只需使用逗号正确连接:before和:after即可。看看工作示例。 background，border和padding属性仅用于可视化，可以删除。

div {
  background: #BADBAD;
  padding: 1rem;
}

.this-text:before,
.this-text:after {
  content: "\00a0 \00a0 ";
  background: snow;
}

.this-text,
.another-text {
  border: 1px solid snow;
}

<div>
  <span class="this-text">This text</span><span class="another-text">Another text</span>
</div>

在CSS类之前和之后

2 个答案: