有没有一种方法可以将伪元素CSS动态添加为内联CSS？

Question

有没有一种方法可以使用C#从代码后台将以下CSS添加为内联CSS

CSS

.slide .btn_six::after {
    content: " ECHNOLOGY";
}

HTML

<div class="slide">
<a target="_blank" href="#" class="post-badge btn_six">T</a>
</div>

我需要列出多篇文章，每篇文章都属于一个类别，并且我需要以动画方式展示每个类别，其中只有单词的第一个字符可见。当用户悬停在其上时，它将显示整个类别名称，就像模板链接中所示。

我想使用C＃从代码后台文件本身来完成这项工作，因为这样会更容易。

我查找了示例，但没有找到任何相关示例。

- Learning

---

仅使用CSS怎么样？例如，包括整个单词但设置.post-badge { visibility: hidden; }和.post-badge:first-letter { visibility: visible; }。 - denmch

@denmch，你能否再解释一下吗？如果我理解得对的话，应该可以工作。 - Learning

a 元素的内容可能包含整个单词，例如 Technology。将其设置为 visibility: hidden，但 :first-letter 设置为可见，您将看到 T 但不会看到 echnology，尽管它会保留空间。您可以添加第三个规则，在悬停时将整个元素设置为可见。 - denmch

虽然这是可能的，但我建议不要这样做，因为你可以很好地只用CSS来完成它。看起来你需要带有动态内容的CSS，在这种情况下，你可以使用数据属性生成HTML，并在CSS中基于它显示内容：https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes。这取决于你需要支持哪些浏览器。 - CrudaLilium

尝试将 a 设置为 display: block; 或 inline-block 以学习。 - denmch

Answer 1

无法完成。

使用JavaScript或使用CSS :hover选择器只能在客户端执行悬停事件。虽然可能将其连接到向服务器发送请求以编写HTML段，然后在JavaScript中替换HTML元素，但这并不是非常实用的方法。更简单的方法是直接在客户端上编写类，而不进行回传服务器，最好只需设置CSS:hover即可完成。

- NightOwl888