Дополнительный пробел появляется, когда я использую 'ç' через контент в CSS
Я вставляю некоторый контент через свойство content в свой файл CSS. Когда у меня есть символ ç, у меня появляется дополнительное пространство. В итоге это выглядит так:
Итак, вы можете видеть, что есть лишний пробел, которого не должно быть, и он появляется только в том случае, если я использую символ ç.
Вот как сейчас выглядит мой код:
&#some-id{
a:before {
content: "Français";
color: #000000;
background: #ffffff;
}
}
Есть ли способ исправить это с помощью атрибута CSS content?
Обновлено: по запросу, вот некоторые из 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>
Какой шрифт используется?
все дело в используемом шрифте, поэтому он нам нужен
Ответы 2
Кажется, работает нормально. Можете ли вы опубликовать больше своего кода?
#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>Обновленный пример
Можете ли вы опубликовать свой источник индекса? Я хочу увидеть, какие еще таблицы стилей вы включаете. Вы должны столкнуться с конфликтами CSS с другими включениями.
Вы можете использовать версию этой буквы в формате ascii, а затем преобразовать ее, используя это: http://www.evotech.net/articles/testjsentities.html
p:before {
content: "Fran\00E7 ais";
color: #000000;
background: #ffffff;
}<p></p>Если я сделаю это таким образом, я все равно получу дополнительное пространство, а если я уберу пространство, очевидно, я получу квадрат неизвестного символа. Есть ли другой способ отделить специальный символ от остальной части строки?
Хм, похоже, что что-то еще влияет на ваш css, поскольку в приведенном выше примере он работает нормально. Какие еще пакеты css вы используете?
Просто начальная загрузка и другой тон CSS, который мы используем во всем приложении.
Вы можете показать конкретный HTML-код? Возможно, вам потребуется использовать специальный символ: css-tricks.com/css-content