CSS如何在没有负边距的情况下偏移第一个字母？

我只是在模拟一个页面供练习，看看我自己能找到什么

我的目标是用不同的字体将所有段落的第一个字母向左偏移，但这给我带来了麻烦

当使用-1.0em边距时，文本最终未对齐。实现这一目标的最佳方式是什么？我对网络开发还比较陌生，所以对我放松点

p:：第一个字母{
字体系列：“锡达维尔草书”；
字号：2.0em；
左边距：-1.0em；
文本转换：大写；
}

占位符

更多的占位符文本

更多的占位符文本

更多的占位符文本


占位符

您可以使用伪元素将该字母作为您可以单独设置样式的元素：

p{
利润率：50像素；
位置：相对位置；
}
第一个字母{
不透明度：0；
}
p：：以前{
内容：attr（数据列表）；
显示：内联块；
位置：绝对位置；
左边距：-20px；
利润上限：-20px；
字体大小：30px；
字体大小：粗体；
字体系列：arial；
}

Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume
伪元素：第一个字母
应用于元素的第一个字母，但它不会将其从正常流中移除，也不会将字母包装在单独的可选元素中

这意味着您可以更改字母的排版和一些其他质量（），但如果不移动整个元素，则无法移动字母

如果要偏移字母，请创建嵌套容器并使用相对定位。然后使用CSS偏移属性（
top
、
bottom
left
和
right
）定位字母


p>span{
字体系列：“锡达维尔草书”；
字号：2.0em；
文本转换：大写；
位置：相对位置；
顶部：-5px；
左：-5px；
}
仅定位第一个字母。
您可以使用：


p:：第一个字母{
字体系列：“锡达维尔草书”；
字号：2.0em；
文本转换：大写；
字母间距：5px；
}

占位符

更多的占位符文本

更多的占位符文本

更多的占位符文本


占位符
所需的输出是什么？HTML是什么样子的？偏移量是什么意思？答案中包含了所有需要的代码，为什么不简单地创建一个代码段并去掉JSFIDLE？谢谢！这在很大程度上解决了这个问题。我只需要稍微调整一下字体大小，让它的间距适合我的模型。