伪元素首字母不起作用

Question

我有一个奇怪的问题::first-letter 在我的网络浏览器上不起作用，但它在移动屏幕上起作用。

.navbar-brand::first-letter, .subscribe-form::first-letter, footer h4::first-letter {
    color: #a32424;
    letter-spacing: 0.02em;
}

<div class="mx-auto navigation-desktop-home">
    <div class="logo-home">
        <a class="navbar-brand text-center w-100" href="/home.html">5test</a>
    </div>
</div>

它确实适用于移动设备，也适用于 css 中的所有其他元素，但此 .navbar-brand::first-letter 不适用于大屏幕。所有浏览器

Answer 1

::first-selector 不适用于内联元素，例如 a 标签。

制作link内联块

.logo-home > .navbar-brand {
  display: inline-block;
}

.navbar-brand::first-letter, .subscribe-form::first-letter, footer h4::first-letter {
    color: #a32424;
    letter-spacing: 0.02em;
}

<div class="mx-auto navigation-desktop-home">
    <div class="logo-home">
        <a class="navbar-brand text-center w-100" href="/home.html">5test</a>
    </div>
</div>

通过定位父 .logo-home 影响所有子项。

.logo-home::first-letter {
    color: #a32424;
    letter-spacing: 0.02em;
}

<div class="mx-auto navigation-desktop-home">
    <div class="logo-home">
        <a class="navbar-brand text-center w-100" href="/home.html">5test</a>
    </div>
</div>

Answer 2

勾选 specification。截至目前，inline 元素不受 ::first-letter:

支持

In CSS, the ::first-letter pseudo-element applies to block-like containers such as block, list-item, table-cell, table-caption, and inline-block elements.
Note: A future version of this specification may allow this pseudo-element to apply to more display types.
https://www.w3.org/TR/selectors-3/#application-in-css

伪元素首字母不起作用

Pseudo element first letter does not work

html

css

pseudo-element

制作link内联块

通过定位父 .logo-home 影响所有子项。