在悬停时将图标置于居中元素旁边，而不使图标居中

Question

我正在尝试在悬停时在居中文字旁边添加一个图标，以文字和图标为中心。我希望图标直接放在居中元素之后。图片应该解释一下。我最好使用flexbox。这就是我目前所拥有的：http://jsfiddle.net/TmdZ3/

HTML

<div class="container">
    <span>Label</span>
    <i>icon</i>
</div>

CSS

.container {
    height: 150px;
    width: 150px;
    border: 5px solid grey;
    display: flex;
    align-items: center;
    justify-content: center;
}

i {
    display: none;
}

.container:hover > i {
    display: flex;
}

Answer 1

您必须对标记进行一些小改动，然后将图标放在范围内，然后将其相对于其父级进行定位：

http://jsfiddle.net/TmdZ3/1/

span {
    position: relative;
}

i {
    display: none;
    position: absolute;
    top: 0;
    right: -30px;
}

注意右：-30px;必须根据图标的大小和跨度的间距进行调整。

Answer 2

你目前有什么尝试？看一下this FIDDLE，它扩展了下面的代码示例。

这应该通过将:hover css的背景设置为：

来完成

background-image:url(myicon.png);
background-repeat:no-repeat;
background-position:right center;

常规链接css类似于

padding:0 15px;

Answer 3

您应该创建一个新的span，使其位置为absolute，将relative保留给其直接父级，然后他会在悬停时获得他想要的内容。

<强> WORKING DEMO

守则：

<div class='wrapper'>
    <span>Label</span>
</div>

.wrapper{
    padding:20px;
    border:4px solid grey;
    display:inline-block;
    color:black;
    font-size:22px;
    font-family:verdana;  
    position:relative;
     width:100px;
    height:30px;
}

span{
    padding:0 20px;
    color:black;
    text-decoration:none;
    position:absolute;

}

希望这有帮助。