Html 按钮悬停效果不影响按钮内的图标

发布于09月07日

我试图用字体显示按钮的下划线效果--太棒了，但我想同时影响文本和图标，但它只影响按钮内的文本，完全忽略图标(如示例所示).有没有办法把这个下划线也延伸到图标上？

button {
  color: #333;
  background: #eee;
  border: none;
  padding: 2px 10px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 500;
}

button:hover {
  text-decoration: underline;
  color: black;
}

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

  <div class="comment-actions" style="display:flex; flex-direction: row; justify-content: start;">

    <button><i class="fa fa-reply"></i> Reply</button>
    <button><i class="fa fa-flag"></i> Report</button>
    <button><i class="fa fa-thumb-tack"></i> Save</button>

  </div>
</body>

推荐答案

默认情况下，Font AWE<i>元素显示为inline-block，不受下划线的影响.但是，如果覆盖默认样式并将其显示为inline个元素，则它们将被视为文本:

button {
  color: #333;
  background: #eee;
  border: none;
  padding: 2px 10px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 500;
}

button .fa {
  display: inline;
}

button:hover {
  text-decoration: underline;
  color: black;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <div class="comment-actions" style="display:flex; flex-direction: row; justify-content: start;">
    <button><i class="fa fa-reply"></i> Reply</button>
    <button><i class="fa fa-flag"></i> Report</button>
    <button><i class="fa fa-thumb-tack"></i> Save</button>
  </div>
</body>

</html>