Question

我想知道是否有人知道如何在CSS动画中更改伪元素（:before或:after）的内容。

它似乎不适合我的小提琴，但也许还有另一种方式：http://jsfiddle.net/xfrfnav1/

Answer 1

有趣的建议，但显然浏览器（在我的情况下是Chrome）忽略了内容。有点道理。毕竟，这是一个动画，并且属性逐渐从一个值“变形”到另一个值，这是内容无法实现的。不过，它的确很好用。

一种可能的解决方案：将所有点放在那里并改变宽度。如果您愿意，可以将文本“加载”放在:before（或div本身）和:after中的点，这样您就可以轻松地从{{1}设置动画。到任何所需的宽度：

<强> Fiddle

Answer 2

我有一个解决方案：here 我在父div上添加了固定宽度，并直接在内容中加载，您的问题是content:"";，没有内容难以显示文字

我的css：

div { width: 61px; }

div:after {
    content:"Loading...";
    display: block;
    overflow: hidden; /* animation gonna reduce content width so points gonna hide */
    -webkit-animation:loading 1s linear 0 infinite;
} 

@-webkit-keyframes loading { /* be careful you must add -moz and other browser prefixed versions */
    0% { width:80% }
    25% { width:85% }
    50% { width:90% }
    100% { width:100% }
}

Answer 3

如果您更改为：-webkit-animation:loading 1s infinite linear;

，则可以正常工作（至少在Chrome中）

在CSS动画中更改伪元素的内容属性

3 个答案: