导航列表项和 ::Before ::After

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

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

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

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

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>

导航列表项和 ::Before ::After

Nav List Items and ::Before ::After

html

css

css-selectors

pseudo-element