Question

是否可以在列表项之前添加:: before和:: after元素？

例如，如果我有以下内容：

<ul>
 <li>One</li>
 <li>Two</li>
 <li>Three</li>

我可以定位最后一项，让我们说并添加一个:: after元素，或者，我是否只能定位实际的UL元素？

ul li:nth-child(3)::after
{
content: "";
height: 10px;
width: 10px;
background: transparent;
border: 1px solid #ccc;
}

Answer 1

以下是有效的CSS - 您可以使用nth-child或last-child，:after可以正常使用。

http://jsbin.com/xatuve/edit?html,css,output

ul li:last-child:after {
  content: "";
  height: 10px;
  width: 10px;
  background: transparent;
  border: 1px solid #ccc;
}

Answer 2

是的，你可以使用。这是演示：

NDEBUG

ul li:nth-child(3)::after
{
   content: "Test";
   height: 10px;
   width: 10px;
   background: transparent;
   border: 1px solid #ccc;
}

Answer 3

是的你可以使用，确保设置position：absolute以使用伪元素的高度和宽度。

ul li:nth-child(3)::after {
  display block;
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  background: transparent;
  border: 1px solid #ccc;
}

<ul>
 <li>One</li>
 <li>Two</li>
 <li>Three3</li>
</ul>

导航列表项和::之前::之后

3 个答案: