Question

在我的Angular应用程序的主页上，我有两个词正在改变他们的定义。更改在CSS中定义：

.header-text:after {
   display: inline-block;
   content:'';
   animation: fide-in 5s linear infinite;
}

@keyframes fide-in {
   0% { content:'BLA'; opacity: 1; }
  50% { content:'BřA'; opacity: 1; }
}

我的问题是'BřA'这个词。在Chrome中，它被解释为'BřA'。如何摆脱'ř'和'A'之间的这个空白？

Answer 1

以下是我的解决方法：

<强> CSS

.header-text:after {
   display: inline-block;
   content:'';
   animation: fide-in 5s linear infinite;
}

@keyframes fide-in {
    0% {
        content: 'BLA';
    }
    50% {
        content: attr(content);
    }

<强> HTML

<p content="BřA" class="header-text"></p>

stackblitz

为什么带有变音符号的关键帧内容会导致额外的空格？

1 个答案: