CSS: <a> 标签在使用伪元素后被禁用

Question

我正在做一个 CSS 练习，其中将克隆 BBC 的旧站点。最初的问题是 #topmenu li 的白色底部边框看起来不稳定（我将这段代码作为评论包含在下面的页面中）

已通过使用伪元素添加右红色边框解决了这个问题。但是，锚标记已被禁用。我认为这是由于红色边框的 "absolute" 位置造成的，但如果没有绝对位置，我无法让菜单按应有的方式显示。现在，它看起来像我想要的那样，但顶部菜单链接不再有效：http://jsbin.com/poginowibe/1/edit?output

关于如何解决这个问题有什么想法吗？任何帮助将不胜感激。

/* 这是原代码，当白底边框出现怪异时 */

#topmenudiv li {
    list-style: none;
    height: 100%;
    padding: 14px 15px 11px 15px;
    border-right: 1px solid #990800;
    float: left;
    position: relative;
    z-index: 1;
}

#topmenudiv li:hover {
    color: #ffffff;
    text-decoration: none;
    padding: 14px 15px 8px 15px;
    border-bottom: 3px solid #FFFFFF;
    outline: 0;
}

/* 这是修复了不稳定的外观但禁用了标签后的代码 */

#topmenudiv li {
    list-style: none;
    height: 100%;
    padding: 14px 15px 11px 15px;
    float: left;
    position: relative;
    z-index: 1;
}

#topmenudiv li:hover {
    color: #ffffff;
    text-decoration: none;
    padding: 14px 15px 8px 15px;
    border-bottom: 3px solid #FFFFFF;
    outline: 0;
}

#topmenudiv li::after {
    content: "";
    position: absolute;
    bottom: 0; top: 0; left: 0; right: 0;
    border-right: 1px solid #990800;
}

通过对 Joerg 的代码进行一些调整，我终于能够让它工作了！

#topmenudiv ul {
    margin-top: 0px;
    padding: 0;
}

#topmenudiv li {
    list-style: none;
    height: 38px;
    line-height: 40px;
    float: left;
    position: relative;
    z-index: 3;
}

#topmenudiv li:hover {
    color: #ffffff;
    text-decoration: none;
    border-bottom: 3px solid #FFFFFF;
    outline: 0;
}

#topmenudiv li a {
    height: 100% !important;
    font-size: 1em;
    line-height: 40px;
    border-right: 1px solid #990800;
    display: block;
    padding-left: 15px;
    padding-right: 15px;
}

#topmenudiv li a:hover {
    text-decoration: none;
}

非常感谢！ :)

Answer 1

从您的 css 中删除 #topmenudiv li::after 并以这种方式更改 #topmenudiv li：

#topmenudiv li {
    list-style: none;
    height: 100%;
    padding: 14px 15px 11px 15px;
    float: left;
    position: relative;
    z-index: 1;
    border-right: 1px solid #990800;
}

更新

使用此代码并查看以下备注：

#topmenudiv ul {
   height: 40px;
   margin: 0;
   padding: 0;
}

#topmenudiv li {
   list-style: none;
   height: 40px;
   float: left;
   border-bottom: 3px solid #FFFFFF;
}

#topmenudiv li:hover {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 3px solid blue;
  outline: 0;
}

#topmenudiv li a {
  height: 40px !important;
  font-size: 1em;
  line-height: 40px;
  border-right: 1px solid #990800;
  display: block;
  padding-left: 15px;
  padding-right: 15px;

}

#topmenudiv li a:hover {
  text-decoration: none;
}

删除 CSS 中的所有 topmenudiv 内容，以及评论上方的内容。

我制作了蓝色悬停的边框底线，所以你可以看到它有效。

您在顶部栏的右侧位置使用了一张图片，#sphere。这应该是 CSS 中的背景图像，因此您不必处理 z-index，然后其余链接将起作用。

我所做的是，给 a 标签一些高度和行高，并将红色 border-left 绑定到它。我还删除了一些填充和边距。

CSS: <a> 标签在使用伪元素后被禁用

CSS: <a> tags disabled after using pseudo elements

css

hyperlink

anchor

absolute

pseudo-element