Add background to first letter of a row of text. How?

Question

Please look at the attached image, below:

This, I made up easily in Photoshop and is for the corporate identity on papers and such. However: I now need to create that for an email signature. Though.. I don't have a clue how to achieve the effect of having a square/rectangular background to the - well let's say - first letter of the sentence.

Since It should not cut off the text to the next row, I can't use a <p> tag.

I hope someone could help me! However, it's for an E-mail signature and all CSS must be inline. edit: And besides that: You can't use DIV's either.. Thank you very much!

Answer 1

You can use :first-letter

div:first-letter {
    padding: 0 3px;
    background: #f00;
}

Demo

Or a better one

div:first-letter {
    padding: 2px 5px;
    background: #174D95;
    font-family: Arial;
    color: #fff;
    font-weight: bold;
    margin-right: 2px;
}

Note: You can replace div with a p element too, but :first-letter will not work on inline elements.

Demo 2 (Using p tag)

---

As you wanted to do this with a span tag, you need to define it as inline-block; to make the :first-letter work.

Doing this with a span tag - Demo

span:first-letter {
    padding: 2px 5px;
    background: #174D95;
    font-family: Arial;
    color: #fff;
    font-weight: bold;
    margin-right: 2px;
}

span {
   display:block
}