span 元素之前的图像作为内联块停止 ::first-letter to apply

问题描述

我的代码：

span.badgeleft {
display: inline-block!important;
background-color: #F1F3F4;
padding: 10px 20px;
border-radius: 100px;
margin-bottom: 8px;
color: #1b2145;
font-family: Circularstd,sans-serif !important;
font-weight: 600;
font-size: 16px;
}
span.badgeleft::first-letter {
text-transform: capitalize !important;
}
img.pinmapimg16 {
vertical-align: middle;
margin-top: -4px;
width: 16px;
margin-right: 10px;
}

<h3>Image before a span element as inline-block stop ::first-letter working</h3>
<span class="badgeleft"><img class="pinmapimg16" src="https://i.ibb.co/dgTs8Cf/map-pin-ico.png">i am with image before,first letter stop working</span>

<h3>No image before a span element as inline-block do not stop ::first-letter working</h3>
<span class="badgeleft">i do not have image before and first letter works fine</span>

有没有人有一个纯 CSS 解决方案来为之前有图像的 span 元素工作 ::first-letter？ （如您所见，span 已经是内联块）。

解决方法

这是预期的行为。见MDN：

::first-letter CSS 伪元素将样式应用到第一个 块级元素第一行的字母，但仅当不是 前面是其他内容（例如图像或内联表格）。

怎么办？如果您可以控制 HTML，您可以将 img 放在 span 之前（使用任何需要的样式，也许在它自己的 span 中），或者您可以考虑将 img 作为背景，适当地设置样式。