Css 如何向图像添加文本装饰？

我的日子有点不好过。我在一些链接旁边创建了一些图标。这些链接在悬停时具有“下划线”文本装饰效果。我添加了图标，它非常适合，只是当锚定标记悬停在上面时，图标没有下划线。我做错了什么

HTML

---

我感谢你的帮助

为什么不试试这样的方法：：（你不能用

文本装饰
属性在
img
下划线）

示例：：
好吧，我想出来了。我最终使用了边界方法。通过定义“link”类的高度，我可以增加或减少文本和图标到底部边框的距离

对于其他有此问题的人，修复代码是

HTML

我应该补充一点，我也试过了。这里的问题是我不能使用border属性，因为我使用line height属性来对齐导航栏中的链接，因此边框显示在导航栏的底部，而不是单词下面。现在，我可以设置边距顶部属性而不是线高度，但它将不完全对齐，这是我不想要的。第二个问题是，当我使用margin-top方法而不是line-height方法时，即使没有定义高度，边框和文本之间的空间也太宽。其他解决方案？
                    <a class="link" href="#"> 
                        <img src="images/home.png" alt="" id="home" class="icon"/>
                        home
                    </a>
                    <a class="link" href="about/">
                        <img src="images/about.png" alt="" id="about" class="icon"/>
                        About
                    </a>
                    <a class="link" href="contact/">
                        <img src="images/contact.png" alt="" id="contact" class="icon"/>
                        Contact
                    </a>
                    <a class="link" href="work/">
                        <img src="images/work.png" alt="" id="work" class="icon"/>
                        Work
                    </a>

#home {

    width: 15px;
    height: 15px;

}

#about { 

    width: 15px;
    height: 15px;

}

#contact {

    width: 19px;
    height: 15px;

}

#work {

    width: 16px;
    height: 15px;

}

.link {

    margin: 0;
    padding: 0;
    display: inline-block;
    line-height: 50px;
    width: 100px;
    font-size: 18px;
    font-family: arial;

}

.link:link {

    color: #ffffff;
    font-weight: bold;
    text-decoration: none;

}

.link:visited {

    color: #ffffff;
    font-weight: bold;
    text-decoration: none;

}

.link:active {

    color: #ffffff;
    font-weight: bold;
    text-decoration: none;

}

.link:hover {

    color: #ffffff;
    font-weight: bold;
    text-decoration: underline;

}

a{
margin-left:30px;
font-size:18px;
text-decoration:none;
}
a:hover { 
border-bottom:1px solid blue;
}

        <div class="navbar">
                    <a class="link" href="#"> 
                        <img src="images/home.png" alt="" id="home" class="icon"/>
                        Home
                    </a>
                    <a class="link" href="about/">
                        <img src="images/about.png" alt="" id="about" class="icon"/>
                        About
                    </a>
                    <a class="link" href="contact/">
                        <img src="images/contact.png" alt="" id="contact" class="icon"/>
                        Contact
                    </a>
                    <a class="link" href="work/">
                        <img src="images/work.png" alt="" id="work" class="icon"/>
                        Work
                    </a>
        </div>

#home {

    width: 15px;
    height: 15px;

}

#about { 

    width: 15px;
    height: 15px;

}

#contact {

    width: 19px;
    height: 15px;

}

#work {

    width: 16px;
    height: 15px;

}

.link {

    margin: 0;
    padding: 0;
    display: inline-block;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 12px;
    height: 18px;
    font-size: 18px;
    font-family: arial;

}

.link:link {

    color: #ffffff;
    font-weight: bold;
    text-decoration: none;

}

.link:visited {

    color: #ffffff;
    font-weight: bold;
    text-decoration: none;

}

.link:active {

    color: #ffffff;
    font-weight: bold;
    text-decoration: none;

}

.link:hover {

    color: #ffffff;
    font-weight: bold;
    text-decoration: none; 
    border-bottom: 1px solid #ffffff;

}