伪元素首字母不起作用[重复]答案

【问题标题】：Pseudo element first letter does not work [duplicate]伪元素首字母不起作用[重复]
【发布时间】：2021-05-19 10:56:03
【问题描述】：

我有一个奇怪的问题 ::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 不适用于更大的屏幕。所有浏览器

【问题讨论】：

这能回答你的问题吗？ :first-letter selector doesn't work for link
嗨 Lalji，我试过了，不幸的是它对我不起作用。奇怪的是，当我查看移动设备时，它确实可以工作：/ 它只是在更大的屏幕尺寸上不起作用
检查样式是在媒体查询中还是在仅在移动设备上加载的样式表中。

标签： html css pseudo-element

【解决方案1】：

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

制作链接内联块

.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>

【讨论】：

我喜欢将其设为inline-block 元素的建议。 :) 有什么已知的缺点吗？
与 MAKE INLINE BLOCK 完美配合。谢谢里卡德，接受了答案:)
@DusanKovacevic 请将帖子标记为正确答案，否则人们将其他帖子标记为重复时无法链接到它。

【解决方案2】：

检查specification。截至目前，::first-letter 不支持inline 元素：

在 CSS 中，::first-letter 伪元素适用于块状容器，例如 block、list-item、table-cell、table-caption 和 inline-block 元素。
注意：本规范的未来版本可能允许此伪元素应用于更多显示类型。
https://www.w3.org/TR/selectors-3/#application-in-css

【讨论】：