Html 悬停时覆盖在图标上

嗨，我的网站上有一个导航栏。它的显示是内联的。目前导航栏由字形图标组成，旁边是文本中的“描述”。（例如“返回”或“设置”） 我喜欢只有字形图标，当鼠标在一个图标上时，应该有一个覆盖层（比字形图标的大小大一点）稍微着色，并带有文本的单词。 我该怎么做？我已经在网上尝试了多个教程，但它们不适用于图标的内联顺序

#管理菜单。字形图标{边距：0px 10px 0px 0px；字体大小：25px；}
#管理菜单{文本对齐：左；列表样式类型：无；边距：30px 0px 30px 0px；填充：0px；}
#管理菜单li{显示：内联；边距：0px 0px 0px 0px；填充：0px；}
#管理菜单li a{后台重复：无重复；填充：0px 15px 0px 0px；}

我得到了这样的东西：

这可能不是您想要实现的，不确定；）

---

我想这是你想要的：

*{
框大小：边框框；
}
#管理员菜单图标{
字体大小：25px；
填充：0 15px
}
#管理菜单{
文本对齐：居中；
列表样式类型：无；
利润率：30像素；
填充：0px；
}
#管理员菜单李{
显示：内联块；
位置：相对位置；
}
#管理员菜单李a{
显示：块；
文本对齐：居中；
}
#管理菜单：第n个孩子（2）{
字体大小：粗体；
位置：绝对位置；
颜色：红色；
宽度：100%；
左：0；
最高：50%；
转化：translateY（-50%）；
不透明度：0；
过渡：不透明度.35s；
}
#管理员菜单LIA：悬停图标{
不透明度：0.2；
过渡：不透明度.35s；
}
#管理菜单LIA:悬停范围：第n个子项（2）{
不透明度：1
}

Qverlays将需要绝对定位，我从那里开始。我已经尝试了绝对定位，但后来遇到了问题，我无法将文本垂直对齐到中间。。。

   #admin_menu .glyphicon{
    position: absolute;
    font-size: 24px;
    left: 50%;
    margin-left: -12px;
    top: 8px;
    }
    #admin_menu { text-align: left; list-style-type: none; margin: 30px 0px 30px 0px; padding: 0px; }
    #admin_menu li{ 
    display: inline-block; 
    margin: 0px 10px 0px 0px; 
    padding: 0px;
    }
    #admin_menu li a { 
    display:block;
    position: relative;
    height:40px;
    width: 60px;
    padding: 0 10px;
    font-size:16px;
    padding-top:12px;
    text-decoration:none;
     }
     #admin_menu .description{
       color:transparent;
       position: absolute;
       width: 100%;
       height:100%;
       top: 0;
       left:0;
       text-align: center;
       line-height: 40px;
       display: block;
       transition: all 0.3s;
     }
    #admin_menu li a:hover .description{
      color: white;
      background-color: rgba(51, 122, 183, 0.75);
    }