css - 对一个 CSS 技巧帮助不大 : chained Pseudo element/classes

Question

想要为任何 a、p、标签等创建类“My-Tag”...以像 html 标签一样用方括号括起来。 在这种情况下，<> 括号需要是蓝色、/斜线灰色、普通文本灰色和悬停白色。我在“内容”之后添加内容。伪元素不能链接(两个连续)。 :) 这几乎可以正常工作，但不是最后一个“>”

.My-tag {color: gray;}
.My-tag:hover {color: white}
.My-tag::before {
    color: royalblue;
    content: "<";
}
.My-tag:after {
    color: gray;
    content: "/";
}
.My-tag::after::after {
    color: royalblue;
    content: ">";
}

<label class="My-tag">SomeText<label/>

Answer 1

您可以在包含两个字符的地方使用一个 :after，然后从左到右应用文本渐变以获得您想要的外观。

.My-tag:after {
  content: "/>";
  background: -webkit-linear-gradient(0deg, gray 50%, royalblue 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

我不能保证跨浏览器支持，这只在 Chrome 中测试过。如果您出于某种原因在 2 个字符之间换行，也可能会导致问题。

这是我能想到的唯一一种仅使用 CSS 的方法，但我建议采用 JS 方法。