jQuery如何改變css虛擬元素樣式

標籤：

首先我們看一下css虛擬元素是什麼：

      CSS 虛擬元素用於向某些選取器設定特殊效果。

虛擬元素有哪些：

      :first-line 虛擬元素："first-line" 虛擬元素用於向文本的首行設定特殊樣式。

      :first-letter 虛擬元素："first-letter" 虛擬元素用於向文本的首字母設定特殊樣式。

      :before 虛擬元素：":before" 虛擬元素可以在元素的內容前面插入新內容。

      :after 虛擬元素：":after" 虛擬元素可以在元素的內容之後插入新內容。

虛擬元素例子：

 .flow_ball1:after {                content: "";                position: absolute;                top: 50%;                margin-top: -1px;                left: 100%;                margin-left: 0.133333rem;                width: 1.786667rem;                height: 2px;                background-color: #ff6600;                border-radius: 0.053333rem;            }
在名為flow_ball1的class標籤後面添加一道橘色橫線（類似於流程圖那種）

那麼，問題來了，怎麼用jquery改變虛擬元素的樣式呢？

 

答案在這裡：

 $(‘.flow_ball1‘).append("<style>#fafang::after{display:none}</style>");

也是千辛萬苦找了好久才找到，因為虛擬元素沒有id，也沒法給他加id，所以一頭霧水，最後在網上看到這個方法，真的很妙，只要在元素前加一個html的style標籤，看完真的有一種茅塞頓開的感覺！

 

jQuery如何改變css虛擬元素樣式