css - 当我通过 CSS 上的内容使用 'ç' 时出现额外的空格字符

Question

我正在通过我的 CSS 文件中的 content 属性插入一些内容。当我有 ç 字符时，我会得到一个额外的空间。它最终看起来像这样:

所以你可以看到有一个额外的空间，它不应该在那里，只有在我使用 ç 字符时才会出现。

这是我的代码目前的样子:

&#some-id{
  a:before {
    content: "Français";
    color: #000000;
    background: #ffffff;
  }
}

有没有办法通过使用 content CSS 属性来解决这个问题？编辑:根据要求，这里是一些使用它的 HTML 代码(它在 li 标签上，我应该注意，我正在使用 Bootstrap :

<section id='top' className='row'>
  <div className='col-sm-12 light'>
    <div className='valign'>
      <div>
        <ul className='row'>
          <li id='some-id' className='col-xs-12 col-sm-6 col-md-4 col-lg-3'>
            <a href='/somewhere'>
              <h2>Content Header</h2>
              <p>More content</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

Answer 1

看起来工作正常。你能发布更多你的代码吗？

#some-id a:before {
  background: #fff;
  color: #000;
  content: "Français";
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<section id='top' className='row'>
  <div className='col-sm-12 light'>
    <div className='valign'>
      <div>
        <ul className='row'>
          <li id='some-id' className='col-xs-12 col-sm-6 col-md-4 col-lg-3'>
            <a href='/somewhere'>
              <h2>Content Header</h2>
              <p>More content</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>