Html 如何增加任何单词/句子前两个字母的字体大小？

我试图使字体大小更大的前两个字母的导航链接。我知道第一个字母可以使用

：first letter

实现。然而，我已经尝试使用下面的span，它增加了字体大小，但没有水平对齐关于和联系人链接正在移动到顶部，这两个链接都应该与其余链接对齐（从底部开始）。我不想设置主容器的行高，因为子链接应该显示在主链接下面。你知道吗

<li><a href="#"><span>01</span> Architectural Design</a></li>

.nav{
字体系列：arial；
背景：#dddddd；
溢出：隐藏；
填充：10px；
}
a{
颜色：#000；
文字装饰：无；
}
保险商实验室{
保证金：0；
填充：0；
列表样式：无；
}
李{
字体大小：12px；
浮动：左；
右边距：30px；
}
ulli是一个跨度{
字体大小：25px；
}

如果将

垂直对齐：top

添加到

span

中，则

span

后面的单词将对齐到

span

的顶部

其他财产包括

middle
bottom
baseline

---

我会设置li元素的线条高度

li{
    font-size:12px;
    float:left;
    margin-right:30px;
    line-height: 25px;
}

我知道你提到你

不想设置主容器的行高度

---

但是这个对你有用吗？

你可以试试这个。。。老派但有用

<div class="nav">
    <ul>
        <li><a href="#"><span>&nbsp;</span>About</a></li>
        <li><a href="#"><span>01</span> Architectural Design</a></li>
        <li><a href="#"><span>02</span> Media</a></li>
        <li><a href="#"><span>03</span> Developments</a></li>
        <li><a href="#"><span>&nbsp;</span>Contact</a></li>
    </ul>
</div>

它只能与伪元素

：before

一起使用，这些伪元素可以使代码更加清晰易读

.empty:之前{
内容：“；
字体大小：25px；
}
.导航{
字体系列：arial；
背景：#dddddd；
溢出：隐藏；
填充：10px；
}
a{
颜色：#000；
文字装饰：无；
}
保险商实验室{
保证金：0；
填充：0；
列表样式：无；
}
李{
字体大小：12px；
浮动：左；
右边距：30px；
}
ulli是一个跨度{
字体大小：25px；
}

您希望它如何对齐？您可以看到关于和联系人链接正在移到顶部。所有链接都应该与其余链接（从底部）对齐。那么我的答案对您有用吗，或者您是否希望“关于”和“联系”链接在底部对齐？您是否有过超过9项的内容？您对此解决方案有何看法？然后只需编辑

ol li:before

的CSS，以更新数字样式：哦，为什么我之前没有这样想呢。不管怎样，唐克斯，伙计。它起作用了。

<div class="nav">
    <ul>
        <li><a href="#"><span>&nbsp;</span>About</a></li>
        <li><a href="#"><span>01</span> Architectural Design</a></li>
        <li><a href="#"><span>02</span> Media</a></li>
        <li><a href="#"><span>03</span> Developments</a></li>
        <li><a href="#"><span>&nbsp;</span>Contact</a></li>
    </ul>
</div>