html - 为什么是:after not working properly on this span?

Question

我坚持使用以下代码:

<h1>
  Registrer faktura
  <span class="helpToggle" style="cursor:pointer;" title="Vis hjelpetekst"> Hjelp</span>
</h1>

//CSS
h1 .helpToggle {
    display: inline-block;
    width: 40px;
    text-indent: 20px;
    border: solid 1px red;
    overflow: hidden;
}

h1 .helpToggle:after {
    content: '?';
    display: inline-block;
    height: 32px;
    width: 32px;
    border: solid 1px green;
}

我不高兴有一个 <span> H1 内的标签标记，但根据 HTML5，现在可以了 - 我无法编辑 HTML 代码(只能编辑样式)。

我的目标是替换 help带有问号的 span 标签内的文本。但出于某种原因 ?被放置在跨度内。

我不明白为什么会这样，我希望其他人能看到发生了什么。

See my fiddle here .

Answer 1

您可以将 visibility 与 ::before 伪元素结合使用，而不是 ::after。

演示:http://jsfiddle.net/abhitalks/E98SE/9/

CSS:

h1 .helpToggle {
    border: solid 1px red;
    position: absolute;
    visibility: hidden;
}
h1 .helpToggle::before {
    content:'?';
    visibility: visible;
    border: solid 1px green;
}

visibility: hidden; 会将元素占用的空间保持原样，因此我们使用 ::before 伪元素来确保 ? 显示在占用空间之前。使其绝对定位将使它脱离流程。