CSS过渡效果在:before伪元素的'content'属性上

Question

这里有一个演示问题的fiddle：http://jsfiddle.net/c4MNs/。

本质上，我正在交换伪类下的content属性的内容，这个操作是正常的。然而，我无法强制执行过渡效果，使得这种交换能够平滑进行。

我遵循了这个答案中的建议：https://dev59.com/xWIk5IYBdhLWcg3wG6zb#19579514。

但你可以看到，在这种情况下这并不起作用。

- Louis93

Answer 1

您无法对伪元素的content属性本身应用过渡效果。您可以将过渡效果应用于伪元素的不透明度、宽度、高度、content的字体大小以及许多其他属性......但不能将过渡效果应用于content属性的内容本身。

- Arbel

---

你有没有任何可能的解决方案来完成这个任务？不一定非要使用CSS。将绝对定位的元素链接到fadeToggle是一个想法，但从以前的使用情况来看，这看起来比转换更笨重。你有什么想法吗？ - Louis93

是的，您需要构建一个自定义的开关。fadeToggle也可以使用。如果您对jQuery的fadeToggle或其他库的类似功能不满意，可以使用CSS过渡构建自己的开关。 - Arbel

非常好！使用不透明度 + 宽度，我可以在 ::before 内容属性中插入一个漂亮的 SVG 图标。 - djibe

Answer 2

如@Arbel所说：

您不能将转换应用于伪元素content属性本身的内容。 您可以将转换应用于伪元素的不透明度，宽度，高度，其内容的字体大小以及许多其他属性...但不能将转换应用于content属性的内容。 深入资源。

但是，关于您对解决方法的请求：

1. Possibility #1:

   here it is described a solution but, note, with a limited cross-browser compatibility:

   HTML Code:

   <div class="letter-changer"></div>
   

   CSS Code:

   @keyframes changeLetter {
     0% {
       content: "A";
     }
     50% {
       color: white;
     }
     100% {
       content: "B";
     }
   }
   
   .letter-changer::after {
     animation: changeLetter 3s linear infinite alternate;
   }
   

   Demo

2. Possibility #2:

   alternatively, you can sum content with other properties for which you can use a transition instead (like text-shadow), to distract the attention in a soft way (but not for content), like in this my demo.

问候

- Riccardo Volpe

Answer 3

虽然这个问题很久以前就被问过了，但由于我仍然面临着同样的问题，所以我需要找到解决方案，你可以在这里找到。

<div class="removeCampaign">
<i class="fa fa-times-circle"></i>

jsfiddle http://jsfiddle.net/sh39nqpy/ 希望这对需要的人有所帮助!

- kuropurogurama

---

你的HTML不完整，而且你的jsfiddle无法工作。请修复这些错误。 - Martijn Luyckx