html - 在悬停时将图标放在居中元素旁边而不使图标居中

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

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

这应该通过将:hoverCSS 的背景设置为以下内容来完成：

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

常规链接 css 到类似的东西

padding:0 15px;

Answer 3

您应该创建一个新的span，使其位置为absolute，保持relative其直接父级，然后他会在悬停时得到他正在寻找的东西。

工作演示

编码：

<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;

}

希望这可以帮助。