我需要一个高级的CSS代码解释

Question

一些旧的YouTube创作者将此作为他会做的事情发布，我之前从未见过这样的代码：

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

他无法提问，这段代码看起来很酷。

Answer 1

为每个:after标记的每个<a>个伪元素添加样式，href属性不包含#个字符，因此它的内容是空白 + 破折号 + 空白 + <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