我需要一個先進的CSS代碼的解釋

Question

一些老的YouTube創作者登載的東西，他會做的，我從來沒有見過這樣的代碼之前：

a[href]:not([href*="#"]):after { 
    content:" - " attr(href); 
} 

他無法問及這段代碼看起來很酷。

Answer 1

風格，href屬性不包含#字符，所以它的內容每<a>標籤的每:after僞元素是空白 + 破折號 + 空白 + <a>的href屬性：

a[href]:not([href*="#"]):after { 
 
    content:" - " attr(href); 
 
}

<a href="href-attribute">With following dash</a> <br> 
 
<a href="#href-attribute">Without following dash</a>

選擇器解釋：

• attr()
• [attribute]
• :not()
• :after