访问CSS“后：”select器与jQuery

我有以下的CSS：

.pageMenu .active::after { content: ''; margin-top: -6px; display: inline-block; width: 0px; height: 0px; border-top: 14px solid white; border-left: 14px solid transparent; border-bottom: 14px solid white; position: absolute; right: 0; } 

我想使用jQuery来改变顶部，左侧和底部边框的边框宽度。 我用什么select器来访问这个元素？ 我尝试了以下，但似乎并没有工作。

 $('.pageMenu .active:after').css( { 'border-top-width': '22px', 'border-left-width': '22px', 'border-right-width': '22px' } ) 

Answer 1

你不能操纵:after ，因为它在技术上不是DOM的一部分，所以不能被任何JavaScript访问。 但是你可以 :after指定:after添加一个新的类。

CSS：

 .pageMenu .active.changed:after { /* this selector is more specific, so it takes precedence over the other :after */ border-top-width: 22px; border-left-width: 22px; border-right-width: 22px; } 

JS：

 $('.pageMenu .active').toggleClass('changed'); 

---

更新：虽然不可能直接修改:after内容:after ，有方法可以阅读和/或使用JavaScript覆盖它。 请参阅“使用jQuery操作CSS伪元素（例如：before和：after）”以获得全面的技术列表。

Answer 2

你可以添加样式：在一个像HTML代码之后。
例如：

 var value = 22; body.append('<style>.wrapper:after{border-top-width: ' + value + 'px;}</style>'); 

Answer 3

如果你使用内置的after()空值，它将创build一个dynamic对象，它将匹配你的CSSselect器。

 $('.active').after().click(function () { alert('clickable!'); }); 

查看jQuery文档 。