Question

以下是展示问题的小提琴：http://jsfiddle.net/c4MNs/

基本上我正在交换content伪下的i:before属性的内容，它可以正常工作。但是，我无法强制进行转换，以便顺利进行此交换。

我遵循了这个答案中的建议：https://stackoverflow.com/a/19579514/765409

但是你可以看到这在这种情况下无效。

Answer 1

您无法将过渡到伪元素content属性的内容本身。您可以将过渡应用于伪元素的不透明度，宽度，高度，content的字体大小以及更多属性...但不是content属性＆＃39 ; s内容。

Answer 2

如@Arbel所说：

您不能将过渡应用于伪元素content属性的内容本身。您可以将转换应用于伪元素的不透明度，宽度，高度，其content的字体大小等等属性...而不是content属性的内容。

In-depth resource。

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

可能性1：

here它是一种解决方案，但请注意，它有一个局限性跨浏览器兼容性：

HTML代码：

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

CSS代码：

@keyframes changeLetter {
  0% {
    content: "A";
  }
  50% {
    color: white;
  }
  100% {
    content: "B";
  }
}

.letter-changer::after {
  animation: changeLetter 3s linear infinite alternate;
}

Demo

可能性2：

或者，您可以将content与其他属性求和您可以改用过渡（例如text-shadow）来分散注意力以柔和的方式关注（但不能content），就像这样我 demo。

问候

Answer 3

虽然很久以前就问过这个问题，但由于我仍然遇到同样的问题所以我需要找到你能在这里找到的解决方案 HTML

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

的jsfiddle http://jsfiddle.net/sh39nqpy/ 希望它能帮助那些有需要的人！

CSS的'content'属性转换：在伪元素之前

3 个答案: