我的小箭头上的 CSS 过渡效果

Posted 2023-02-24

【中文标题】我的小箭头上的 CSS 过渡效果

【英文标题】：CSS Transition effect on my itty bitty arrow

【发布时间】：2012-06-21 22:23:51

【问题描述】：

http://jsfiddle.net/pCeGu/

参见上面的 JsFiddle。请注意按钮下方弹出的小箭头。是否有可能使该事物与其他元素一起淡入/淡出？

【参考方案1】：

根据这个问题：CSS :after hover Transition

显然Firefox 4是目前唯一支持伪元素过渡的浏览器：(

【参考方案2】：

考虑使用带有绝对定位的 unicode 图形字符作为链接的一部分，而不是使用 :after。

见：What characters can be used for up/down triangle (arrow without stem) for display in html?

【讨论】：

知道如何将 unicode 传递到 after 伪元素的 content 属性中吗？

你必须使用对 unicode 值的转义引用：alanhogan.com/tips/css/special-characters-in-generated-content 但我认为你会遇到同样的问题，如果你把它放在 ::after 中，你就不能转换伪元素。我认为 Diodeus 建议您在标记中添加 unicode 字符。

这就是我的建议。在当前元素中放置一个包含 unicode 字符的绝对定位元素。