按钮悬停下划线效果未覆盖内部Font Awesome图标问题求助

默认情况下Font Awesome的fa类是inline-block元素，父元素的text-decoration不会作用于这类子元素，导致只有文本显示下划线，图标不受影响。以下是几种可行的解决方案：

方法一：用border-bottom模拟下划线 #

这种方法最直接，通过底部边框替代文本下划线，会覆盖按钮内所有内容的下方区域：

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

button:hover {
  color: black;
  border-bottom: 1px solid black;
  padding-bottom: 1px; /* 抵消边框高度，避免按钮悬停时高度变化 */
}

方法二：修改图标为inline元素继承下划线 #

将Font Awesome图标改为inline显示，让它和文本一起继承父元素的text-decoration：

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

button .fa {
  display: inline; /* 覆盖fa默认的inline-block属性 */
}

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

方法三：用伪元素实现全屏宽下划线 #

如果需要下划线撑满按钮的整个宽度（而非仅文本区域），可以用伪元素模拟：

button {
  color: #333;
  background: #eee;
  border: none;
  padding: 2px 10px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 500;
  position: relative; /* 为伪元素定位提供基准 */
}

button:hover::after {
  content: '';
  position: absolute;
  bottom: 2px; /* 与按钮内边距对齐 */
  left: 10px;
  right: 10px;
  height: 1px;
  background-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">
  <style>
    button {
      color: #333;
      background: #eee;
      border: none;
      padding: 2px 10px;
      font-size: 1rem;
      cursor: pointer;
      font-weight: 500;
    }

    button:hover {
      color: black;
      border-bottom: 1px solid black;
      padding-bottom: 1px;
    }
  </style>
</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>

内容的提问来源于stack exchange，提问作者phantom_wizard