css 使用:after在元素后添加空格(““)

pwuypxnk  于 2023-03-25  发布在  其他
关注(0)|答案(6)|浏览(265)

我想在一些内容后添加一个空格,但是content: " ";似乎不起作用。
这是我的代码:

h2:after {
    content: " ";
}

...这不起作用,但这确实起作用:

h2:after {
    content: "-";
}

我哪里做错了?

yyyllmsg

yyyllmsg1#

原来它需要通过转义的unicode指定。This question是相关的,包含答案。
解决方案:

h2:after {
    content: "\00a0";
}
z5btuh9x

z5btuh9x2#

解释

值得注意的是,您的代码确实插入了一个空格

h2::after {
  content: " ";
}

但是,它会立即被删除。
从Anonymous inline boxes,
随后将根据“whit-space”属性折叠白色内容不会生成任何匿名内联框。
并且从“空白”处理模型,
如果一行末尾的空格(U+0020)的“white-space”设置为“normal”、“nowrap”或“pre-line”,则也会将其删除。

溶液

因此,如果您不希望删除空间,请将white-space设置为prepre-wrap
x一个一个一个一个x一个一个二个x
不要使用不换行的空格(U+00 a0)。它们应该是用来防止单词之间的换行。它们不应该被用作不可折叠的空格,那是不符合语义的。

sr4lhrrt

sr4lhrrt3#

我需要这个而不是使用padding,因为我使用inline-block容器来显示工作流时间轴中的一系列单独事件。时间线中的最后一个事件后面不需要箭头。
最后的结果是:

.transaction-tile:after {
  content: "\f105";
}

.transaction-tile:last-child:after {
  content: "\00a0";
}

用于gt(chevron)字符的fontawesome。无论出于何种原因“内容:无;”在最后一个图块上产生对准问题。

rslzwgfq

rslzwgfq4#

试试...

<span>first part</span>
<span>&nbsp;&#8203;</span>
<span>second part</span>

…”​(或“​”)允许“第一部分”和“第二部分”在必要时进行 Package

o2rvlv0m

o2rvlv0m5#

伪元素中的“\00a0”可能存在问题,因为它采用其定义元素的文本装饰,因此,例如,如果定义元素加下划线,则伪元素的白色也加下划线。
最简单的处理方法是将伪元素的不透明度定义为零,例如:

element:before{
  content: "_";
  opacity: 0;
}
dgiusagp

dgiusagp6#

element::after { 
    display: block;
    content: " ";
}

这对我很有效。

相关问题