Add a background to the first letter of the line of text. How?

Question

Please see the attached image below:

This, I easily composed in Photoshop and is designed for corporate identity on papers and the like. However: now I need to create this for email. Although .. I have no idea how to achieve the effect of having a square / rectangular background for - well, let them say - the first letter of the sentence.

Since it should not interrupt the text until the next line, I cannot use the <p> .

Hope someone can help me! However, this is for email, and all CSS must be inline. edit: And besides: you cannot use the DIV either .. Thanks a lot!

Answer 1

You can use :first-letter

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

Demo

Or better

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

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

Demo 2 (using p tag)

---

How you wanted to do this with the span tag, you need to define it as inline-block; to do the job :first-letter .

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 }