Css 为某一特定单词等的第一个字母设计样式

我试着用一个大的首字母和其他字母的间距来设计一个单词。我目前的解决方案非常难看：请参阅（以及一个出现故障的JSFIDLE）

理想情况下，不要像这样丑陋：

没有比这更不合理的了……

我可以做一些明智的事情：

没有比这更不合理的了……

有什么想法吗？谢谢。

您可以使用

：第一个字母

伪元素为 主要用于创建公共文件 字体效果，如落笔。 这个伪元素表示 第一个格式化字符的第一个字符 块级元素中的文本行， 一个内联块、一个表标题、一个 表格单元格或列表项

IE8+和所有现代浏览器都支持它

例如：

---

对于问题的另一半，请尝试：

T<span>HERE</span>

div > span:first-child {
    letter-spacing: .2em;
    margin-right: -.2em
}

在那里
div>span:第一个孩子{
字母间距：2米；
右边距：-.2米
}

---

我真的看不出使用自定义

dropcap

元素有什么意义。除非您不介意添加支持IE8和更低版本的浏览器，或者您根本不关心这些浏览器。

或者您可以使用我找到的这个JS解决方案

---

您的JSFIDLE出现故障，因为您已经在

中包装了CSS。

，这已经为您完成了。它还将代码包装在

html

和

body

中。这更像是：我的段落中有太多的跨距和div，所以我有点担心你的方法。有没有一种方法可以这样做？：

那里

。谢谢。

：第一个字母

在

span

这样的内联元素上不起作用，因此我建议使用这种HTML结构：，或者如果您喜欢您的

dropcap

元素：很酷，非常感谢。我希望我知道为什么

：第一个字母对内联元素不起作用，但知道它肯定有助于解释很多问题。