CODEWITHSUNDEEP
htmlcssfrontend
Paweł Kolanowski
Paweł Kolanowski

Reputation: 342

Styling numbers in SPAN

I need help with the frontend. Is it possible to set the style for the number (string) without breaking it in HTML?

How I wish that it looked like in HTML: 

 <div>Dodano: <span>127</span> stylizacji</div>

The effect that I want to get should look like this: link to Dropbox

Upvotes: 1

Views: 2034

Answers (4)

Natalie
Natalie

Reputation: 46

You can use pseudoelement "after" and it works fine with any number of digits without breaking into html. You will need a background-image from the first answer.

span {
    background: transparent url('https://dl.dropboxusercontent.com/u/2722739/other/bg.png') 0 0 repeat-x;
    color: white;
    display: inline-block;
    font-size: 53px;
    letter-spacing: 21px;
    padding-left:8px;
    position:relative;
    margin-left:10px;
    margin-right:-2px;
}
span:after {
    content:'';
    display:block;
    position:absolute;
    width:8px;
    height:66px;
    background:#fff;
    top:0;
    right:0;
}

Here is an example JSFIDDLE

Upvotes: 2

Jyoti
Jyoti

Reputation: 11

   <div style="background-color:#f1f1f1; border:1px solid#dddddd; width:190px; padding:      27px;">
     Dodano:
     <span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">1</span>
     <span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">2</span>
     <span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">7</span> 
     stylizacji

   </div>

Upvotes: 0

Amy
Amy

Reputation: 7466

Here is completely CSS solution without changing your HTML. However, I did create a custom image for the background to go behind the numbers. You will have to tweak the size to make sense with your website.

Using a repeating background with a rectangle including a small space on the right-side to "space" out the digits. Use letter-spacing to give more space between the numbers.

background: transparent url('https://dl.dropboxusercontent.com/u/2722739/other/bg.png') 0 0 repeat-x;
color: white;
display: inline-block;
font-size: 53px;
letter-spacing: 20px;
overflow: hidden;
padding-left: 8px;
text-align: justify;
width: 130px;

See the example: http://jsfiddle.net/amyamy86/6FaLd/

Upvotes: 2

Simon Martin
Simon Martin

Reputation: 4231

You can apply styling to the span element. 

<div>Dodano: <span style="color:blue;">127</span> stylizacji</div>

Upvotes: 1

Related Questions