CODEWITHSUNDEEP
css
Mahesh
Mahesh

Reputation: 1689

How to bold all digits before period in a number?

I am trying to change the font size of a price value using the CSS below:

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

Unfortunately this is working only with single digit numbers before period like (9.99, 0.99). Is there a way in CSS to change the font-size for all digits before period (10.99, 18.27, 190.45 etc)?

Upvotes: 0

Views: 1359

Answers (4)

Roi
Roi

Reputation: 565

If the values are static/dynamic it doesnt matter just follow this format I suggest:

<p class="val"><span>9999</span>.<span>99</span></p>

in css

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

in js to apply this, for example 

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

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201608

There is no way to do this without introducing an element that contains just the characters to be rendered in bold. It depends on the context whether you write markup for the element or generate the element dynamically with client-side JavaScript.

Using static markup, you could write e.g.

<b>10</b>.99

Some people may call that “semantically wrong”, but this is really the most reliable way to bold characters. A different approach is to use HTML markup like

<span class=int>10</span>.99

and the CSS code

.int { font-weight: bold }

Both ways require the availability of a bold typeface of the font being used. This is important especially when using Google Fonts and other downloadable fonts. If a bold typeface is not available, browsers usually apply fake bolding (algorithmic/synthetic bolding), with typographically inferior results.

Note. Setting font-size does not effect boldness, even though larger characters may look bolder when you compare them with smaller characters.

Upvotes: 1

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

using pseudo element :after

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

or

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

Upvotes: 1

oshell
oshell

Reputation: 9113

There is no way to style numbers (decimal places, decimal separator, thousands separator, etc.) with pure css. Even JS solutions would be inaccurate. You normally solve this by using the span tag and styling it.

Upvotes: 1

Related Questions