Question

我使用:after伪元素在块之后显示装饰（三角形）（在我的情况下为<li>）。我们的想法是将当前选定的li与其他<ul> <li class="active" style="background-color: hsl(108, 60%, 50%)">One</li> <li style="background-color: hsl(36, 60%, 50%)">Two</li> <li style="background-color: hsl(252, 60%, 50%)">Three<li> </ul>区分开来。

Fiddle here

html如下：

ul li {
    width: 300px;
    height: 30px;
    border: 1px dashed;
    position: relative;
}

li.active::after {
    content: " 0020";
    display: block;
    font-size: 0px;
    position: absolute;
    left:100%;
    top: 0%;
    width: 0px;
    height: 0px;
    background: transparent;
    border: 17px solid transparent;
    border-left-color: #FF3900;
}

和css：

border-left-color

我想更改li.active::after伪元素的background-color样式属性，以便将<li>元素的class=active与$("ul li").click(function() { $("ul li").removeClass("active"); $(this).addClass("active"); $("li.active::after").css('border-left-color', $(this).css('background-color')); });相匹配。

我想出了以下jquery：

{{1}}

这不能按预期工作。任何帮助表示赞赏。

Answer 1

你不能用jquery选择伪元素，例如：before和：after。但在您的情况下，您可以执行一种解决方法，在：after之后使用父li的样式，从而匹配border-color属性

codepen

CSS更新：

ul li {
    width: 300px;
    height: 30px;
    border: 1px dashed;
    position: relative;
}
li:first-of-type.active {
  border-left-color: green; // your exact colors here
}
li:nth-of-type(2).active {
  border-left-color: orange;
}
li:last-of-type.active {
  border-left-color: purple;
}
li.active::after {
    content: " 0020";
    display: block;
    font-size: 0px;
    position: absolute;
    left:100%;
    top: 0%;
    width: 0px;
    height: 0px;
    background: transparent;
    border: 17px solid transparent;
    border-left-color: inherit;
}

然后只删除包含：after选择器的js行。不再需要了

Answer 2

我已经写了这篇文章，因为@DMTinter提交了他的答案，所以请道歉：

使用父元素的边框颜色属性

因为您无法选择:after＆amp; JQuery中的:before伪元素（我找不到对不起的引用），你必须使用父元素的CSS才能使它工作：

http://jsfiddle.net/kbpg6/2/

根据您的代码：

<ul>
    <li class="active" style="background-color: hsl(108, 60%, 50%); border-color: hsl(108, 60%, 50%)">One</li>
    <li style="background-color: hsl(36, 60%, 50%); border-color: hsl(36, 60%, 50%)">Two</li>
    <li style="background-color: hsl(252, 60%, 50%); border-color: hsl(252, 60%, 50%)">Three<li>
</ul>

ul li {
    width: 300px;
    height: 30px;
    border: 1px dashed;
    position: relative;
    border-color: #ccc; /* -> default "arrow" colour */
}

li.active:after {
    content: " 0020";
    display: block;
    font-size: 0px;
    position: absolute;
    left:100%;
    top: 0%;
    width: 0px;
    height: 0px;
    background: transparent;
    border: 16px solid transparent;
    border-left-color: inherit;
}

使用jQuery修改：after伪元素的CSS

2 个答案: