html - CSS :after will not work

Question

我有一个 css prop 就像声明的那样

#menu li#selected { padding: 0 10px; margin:0; background:url(nav-tab-left.gif) bottom left no-repeat #90288d; height: 35px; }

在 li 之后我需要显示图像的第二部分 nav-tab-right.gif

我试试

#menu li#selected:after { background:url(nav-tab-right.gif) bottom right no-repeat; }

但这返回不确定

Answer 1

如果 CSS 中没有“content”属性，:after 将什么都不做。它选择一个伪元素，表示它所应用的元素的最后一个子元素(在您的例子中，是 li#selected 的子元素的一种虚拟元素)。

它不像正则表达式可以处理行首和行尾那样的“占位符”引用；您实际上必须为其提供一个内容属性，该属性将被渲染但不会成为 DOM 树的一部分。该内容可以是空字符串，但仍必须指定:

#menu li#selected:after
{
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: red; 
}

这应该让您了解可实现的目标。