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>

Answer 2

您可以使用该字母的ascii版本，然后使用以下命令进行转换：http://www.evotech.net/articles/testjsentities.html

  p:before {
    content: "Fran\00E7 ais";
    color: #000000;
    background: #ffffff;
  }

<p></p>

当我通过CSS上的内容使用'ç'时出现多余的空格字符

2 个答案: