Truy cập css ": sau khi" chọn với jQuery

Question

Tôi có css sau:

.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; 
} 

Tôi muốn thay đổi biên giới-chiều rộng của đầu, bên trái, và biên giới phía dưới sử dụng jQuery. Tôi chọn bộ chọn nào để truy cập phần tử này? Tôi đã thử những điều sau nhưng nó dường như không hoạt động.

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

Answer 1

Bạn không thể thao tác :after, bởi vì nó không phải là về mặt kỹ thuật là một phần của DOM và do đó không thể tiếp cận bởi bất kỳ JavaScript. Nhưng bạn có thể thêm một lớp mới với một số mới :after được chỉ định.

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'); 

---

UPDATE: trong khi nó không thể trực tiếp sửa đổi nội dung :after, có nhiều cách để đọc và/hoặc ghi đè nó sử dụng JavaScript. Xem "Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after)" để biết danh sách kỹ thuật toàn diện.

Answer 2

Bạn có thể thêm kiểu cho : sau giống như mã html.
Ví dụ:

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

Answer 3

Nếu bạn sử dụng jQuery built-in after() với giá trị rỗng nó sẽ tạo ra một đối tượng năng động mà sẽ phù hợp với selector :after CSS của bạn.

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

Xem jQuery documentation.