如果使用css进行href，如何在锚点中显示下划线

Question

我正在尝试在用户悬停在其上时创建导航栏下划线显示在其下方有一段距离 在这里我实现但不能成功地使下划线和链接之间的距离请看我的愿望输出为图像

public void showAvailableStorage(long free, long total) {
        long newTotal = total;
        float freePercentage = (float)(free/total) * 100;
    }

body {
  font-size: 30px;
  text-align: center;
}

.underline-on-hover:hover {
  text-decoration: underline;
}

但我的愿望结果应该是这样的

Answer 1

您可以使用border-bottom设置:hover：

的下划线样式

＆＃13;

＆＃13;

body {
  font-size: 30px;
  text-align: center;
}
.underline-on-hover:hover {
  text-decoration: none;
  border-bottom:2px solid black;
}

＆＃13;

<span class="underline-on-hover">Shop</span>

＆＃13;

＆＃13;

＆＃13;

您可以使用padding-bottom

调整文本和下划线之间的间距

＆＃13;

＆＃13;

body {
  font-size: 30px;
  text-align: center;
}
.underline-on-hover:hover {
  text-decoration: none;
  border-bottom:2px solid black;
  padding-bottom:10px;
}

＆＃13;

<span class="underline-on-hover">Shop</span>

＆＃13;

＆＃13;

＆＃13;

要调整菜单项下的空间，您可以使用margin-bottom。

Answer 2

使用边框代替并用填充控制距离：

＆＃13;

＆＃13;

body {
  font-size: 30px;
  text-align: center;
  
}

.underline-on-hover:hover {
  padding-bottom:20px;
  border-bottom:3px solid;
}

＆＃13;

<span class="underline-on-hover">Shop</span>

＆＃13;

＆＃13;

＆＃13;

或者更好的解决方案是使用伪元素，您将能够控制距离和长度：

＆＃13;

＆＃13;

body {
  font-size: 30px;
  text-align: center;
  
}
.underline-on-hover {
 position:relative;
}

.underline-on-hover:hover::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-10px; /* control position */
  height:2px; /* control height */
  width:30px; /* control lenght */
  background:#000;
}

＆＃13;

<span class="underline-on-hover">Shop</span>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以改为使用边距底部填充距离

＆＃13;

＆＃13;

body {
  font-size: 30px;
  text-align: center;
}
.underline-on-hover:hover {
  padding-bottom: 5px;
  border-bottom: 2px solid #000;
}

＆＃13;

<span class="underline-on-hover">Shop</span>

＆＃13;

＆＃13;

＆＃13;