将背景添加到一行文本的第一个字母。怎么样？

Question

请查看下面附图：

这个，我在Photoshop中很容易编写，并且用于论文等的企业形象。但是：我现在需要为电子邮件签名创建它。虽然..我不知道如何实现方形/矩形背景的效果 - 好吧 - 比如句子的第一个字母。

由于它不应该将文本切断到下一行，因此我无法使用<p>标记。

我希望有人可以帮助我！但是，这是一个电子邮件签名，所有CSS必须是内联的。编辑：除此之外：你也不能使用DIV ..非常感谢你！

Answer 1

您可以使用:first-letter

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

Demo

或better one

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

  

注意：您也可以将div替换为p元素，但:first-letter不能用于inline elements。

Demo 2（使用p代码）

---

如果您希望使用span代码执行此操作，则需要将其定义为inline-block;以使:first-letter正常工作。

使用span代码执行此操作 - Demo

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

span {
   display:block
}