Question

我想在提交按钮旁边显示一个基于CSS的忙指示符。我为此使用了after伪元素，但是我没有将指示符图标放在按钮旁边/外面。

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

所以我猜我的问题是＆＃34;如何从流中取出后面的伪元素＆＃34;或类似的。

请注意，我不想要将按钮嵌入到另一个容器中，以将忙指示符放在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

我无法理解：

我可以添加一个像左边的规则：100px将它向右推，然后在按钮外面，但这不是我想要的：仍然在按钮内保留空间。我不能使用绝对定位，因为按钮文本是灵活的（翻译）

你是什么意思？

Here is a jsFiddle似乎可以解决您的问题。给元素absolute定位，并给它一个负right值，使其超出父元素的右边缘。

如果这个答案不正确，你可以制作一个说明问题的小提琴吗？

Answer 2

我不确定这是不是你的意思，但试试这个：

http://jsfiddle.net/h5avjzq3/2/

基本上，由于按钮的宽度是动态的，我使用

margin-left: calc(100% + 10px);
position: absolute;
left: 0;

这将确保按钮总是正确的按钮，但你现在必须实际保留空间。（你说它已经完成了）

伪后元素旁边/外部按钮的忙指示符

2 个答案: