CSS中的框创建

Question

我有一个无序列表作为菜单，当前项目有一个类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;}

您可以将border-bottom样式添加到任何元素。我将它附加到标签上，以便它跨越它所包含内容的整个宽度。

Here's an example fiddle (don't mind the extra fluff)