Как выделить все цифры перед периодом в цифрах?

Я пытаюсь изменить размер шрифта цены с помощью CSS ниже:

h2.bold.value::first-letter {
 font-size: 150%;
}

К сожалению, это работает только с одиночными цифрами до периода вроде (9.99, 0.99). Есть ли способ в CSS изменить размер шрифта для всех цифр до периода (10.99, 18.27, 190.45 и т.д.)?

4 ответа

Если значения статические/динамические, не имеет значения, просто следуйте этому формату, я предлагаю:

<p><span>9999</span>.<span>99</span></p>

в css

.val {
 //Overall style
}
.val span:first-child {
 //style digits before period
}
.val span:last-child {
 //style digits after period
}

в js, чтобы применить это, например

x = '999.99';
x = str_replace(".",".<span>",x);
x = '<p><span>' + x + '</span></p>;
</span>


Невозможно сделать это без введения элемента, содержащего только символы, которые будут выделены жирным шрифтом. Это зависит от контекста: пишете ли вы разметку для элемента или динамически генерируете элемент с помощью клиентского JavaScript.

Используя статическую разметку, вы можете написать, например,

<b>10</b>.99

Некоторые люди могут назвать это "семантически неправильно", но это действительно самый надежный способ смелых символов. Другой подход - использовать разметку HTML, например

<span>10</span>.99

и код CSS

.int { font-weight: bold }

В обоих случаях требуется наличие полужирного шрифта используемого шрифта. Это особенно важно при использовании Google Fonts и других загружаемых шрифтов. Если полужирный шрифт недоступен, браузеры обычно применяют фальшивый смелый (алгоритмический/синтетический полужирный шрифт) с типично низкими результатами.

Заметка. Установка font-size не влияет на смелость, даже если большие символы могут выглядеть более смелыми при сравнении их с меньшими символами.


с использованием псевдоэлемента :after

div {
 font-size: 30px;
}
div:after {
 content: '.99';
 font-size: 15px;
}
<div>99</div>

или

div{
 font-size:30px;
}
div:after{
 content:attr(data-content);
 font-size:15px;
}
<div data-content=".99">99</div>


Нет способа стилизовать числа (десятичные разряды, десятичный разделитель, разделитель тысяч и т.д.) С чистым css. Даже решения JS были бы неточными. Обычно вы разрешаете это с помощью тега span и его стилизации.

licensed under cc by-sa 3.0 with attribution.