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

您可以在单个字符之后加上两个字符，然后从左到右应用文本渐变以获得所需的外观。

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

我不能保证跨浏览器支持，仅在Chrome中进行了测试。如果您出于某些原因在两个字符之间出现换行符，也可能会引起问题。

这是我可以想到的唯一的纯CSS方法，我还是建议您采用JS方法。

一个CSS技巧的帮助不大：链接的伪元素/类

1 个答案: