删除 h1 标签的第一个字母

Question

我面临着一个棘手的问题。我有一个带有公司名称的 h1 标签。就在代表该公司徽标且看起来与组织名称的第一个字母相似的图像之前。

<img src="logo.png" alt="O" /><h1>Organization</h1>

这里的 ALT 不是“O”——我只是用它来表示它看起来像一个“O”。

现在与

img, h1 {float:left}

我让它们一起漂浮，问题就开始了。我希望该图像替换 h1 标签的第一个字母，但我仍然希望将完整的组织名称保留在 h1 标签中，以实现有用的 SEO。

通过 CSS 替换第一个字母并不是有用的方法，因为我需要单独的 img-Tag，这样我就可以将它用于新的 schema.org 标记。

Answer 1

您可以使用 ::first-letter 和 ::after 伪类，并且它仍然对 SEO 友好

使用伪类的示例

h1::first-letter {
  color: transparent;    
}