有没有一种方法可以动态添加伪元素 css 作为内联 css

Posted 2023-03-05

【中文标题】有没有一种方法可以动态添加伪元素 css 作为内联 css

【英文标题】：Is there a way we can dynamically add pseudo-element css as inline css

【发布时间】：2018-06-30 01:45:08

【问题描述】：

有没有一种方法可以使用代码隐藏中的 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>

我必须列出多篇文章，每篇文章都属于一个类别，每个类别我必须以动画方式显示，其中只有单词的第一个字符可见，当用户将鼠标悬停在它上面时，显示整个类别名称，如图所示在模板中link。

我想使用代码隐藏文件本身中的 C# 来执行此操作，因为它很容易

我查看了示例，但找不到任何相关示例

【问题讨论】：

只使用 CSS 怎么样，例如包括整个单词，但设置 .post-badge visibility: hidden; 和 .post-badge:first-letter visibility: visible; ?

@denmch，如果我理解它应该可以工作，你能解释一下吗

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

@denmch，我试过了，但没有显示第一个字符codepen.io/anon/pen/rpPKvJ

尽管有可能我建议不要这样做，因为你可以用 css 很好地做到这一点。看起来您需要具有动态内容的 css，在这种情况下，您可以生成带有数据属性的 html，并在 css 中显示基于它的内容：developer.mozilla.org/en-US/docs/Learn/HTML/Howto/…。这在一定程度上取决于您必须支持哪些浏览器。

【参考方案1】：

做不到。

只能在客户端使用 javascript 或使用 CSS :hover selector 来执行悬停事件。虽然可以将其连接起来以将请求发送回服务器以编写一段 HTML，然后在 JavaScript 中替换 HTML 元素，但这不是很实用。只需在客户端编写类而不需要往返服务器就更简单了，或者更好的是，只需设置一个 CSS :hover 并完成它。