html - 按钮旁边/外部元素后的伪忙碌指示器

Question

我想在提交按钮旁边显示一个基于 CSS 的忙碌指示器。我为此使用了 after 伪元素，但我未能将指示器图标放在按钮旁边/之外。

显然我可以添加一个像 left: 100px 这样的规则来将它推到按钮的右边和外面，但这不是我想要的:按钮内部仍然保留了空间。我不能使用绝对定位，因为按钮文本是灵活的(翻译)。

所以我想我的问题类似于“如何将 after 伪元素从流程中取出”或类似的问题。

请注意，我不想将按钮嵌入到额外的容器中以将忙碌指示器放置在 DOM 中。

这里有一个小例子来说明我的意思:jsfiddle

HTML 标记:

<button>text on button</button>

CSS 规则:

button{
    display: inline-block;
    position: relative;
    float: left;
    padding: 10px;
    font-size: 60px;
}
button:after{
    content: url("https://skitch-img.s3.amazonaws.com/20120509-qf93juewhfhk69k9i42kfxbi3r.png");
    position: relative;
    padding: 0;
    margin: 0;
}

Answer 1

我不明白这个:

I can add a rule like left: 100px to push it right and outside the button, but that is not what I am looking for: still the space is reserved inside the button. I cannot use absolute positioning, since the button text is flexible (translations)

什么意思？

Here is a jsFiddle这似乎可以解决您的问题。赋予元素 absolute 定位，并赋予其负的 right 值以将其推到父级的右边缘之外。

如果这个答案不正确，你能制作一个 Fiddle 来说明问题吗？