超链接下的不需要的下划线显示

Question

我试图在鼠标悬停在链接上时显示线条并且工作正常，但是当悬停在链接上时会出现另一条白线

CSS：

.navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav > li > a:focus 
 {
  color: white;
  background-color: transparent;
  text-decoration: underline;
  border-bottom: solid 3px red;
 }

如何删除主页链接下的白线？

Answer 1

更改您的代码：

<xsl:variable name="KidsNames">
    <xsl:for-each select="$Rows[@Age = 15]">
        <xsl:if test="position() > 1">
            <xsl:text>,</xsl:text>
        </xsl:if>
        <xsl:value-of select="@Name"/>
    </xsl:for-each>
</xsl:variable>

到

  text-decoration: underline;

Answer 2

将CSS代码上的text-decoration: underline;更改为text-decoration: none;。使用以下代码：

.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
    color: white;
    background-color: transparent;
    border-bottom: 3px solid red;
    text-decoration: none;
}

Answer 3

a {
  text-decoration: none;
}