css - CSS中的盒子创建

Question

我有一个无序列表作为菜单，当前项目有一个 class active。我希望活动项目在其下方有一个小框，如所附图像中所示。我将如何仅使用 CSS 来做到这一点？如果没有（好的）答案，我会去老派并创建一个图像作为background-image.

Answer 1

您所描述的可以使用伪元素来完成，并将其相对于您正在装饰的元素定位：http: //jsfiddle.net/fC7gn/

.box {
  position: relative;
}

.box:after {
  content: '';
  position: absolute;
  top: 100%;
  width: 100%;
  height: 10px;
  background-color: blue;
}

Answer 2

您可以将以下内容添加到您的 CSS：

a:hover{border-bottom:10px solid red;}

您可以将边框底部样式添加到任何元素。我将它附加到 a 标签上，因此它跨越了它包含的内容的整个宽度。

这是一个示例小提琴（不要介意额外的绒毛）