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代码（只是样式）。

我的目标是用问号替换span标记内的help文本。但由于某种原因，?被放置在跨度内。

我无法弄清楚为什么会这样，我希望其他人能看到发生的事情。

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伪元素来确保在占用空间之前显示?。使其绝对定位将使其脱离流程。

Answer 2

您想用问号替换“帮助”一词吗？然后：实际上不是之后，它会在元素之后放置问号。

但是你可以隐藏跨度并使：在元素可见之后：

h1 .helpToggle {
    visibility: hidden;
    text-indent: 20px;
    border: solid 1px red;
    overflow: hidden;
    font-size: 0px;
}

h1 .helpToggle:after {
    visibility: visible;
    content: '?';
    border: solid 1px green;
    font-size: 24pt;
}

现场演示：http://jsfiddle.net/w5B4Z/

为什么：在这个范围内不能正常工作？

2 个答案: