英文:
::first-letter on <sub> and <sup>
问题
<sub> 和 <sup> 看起来不支持 ::first-letter CSS 伪元素。有什么解决方法吗？
p:first-letter,
sub:first-letter,
sup:first-letter {
color: red;
font-weight: bold;
}
<p>这个文本包含<sub>下标</sub>文本。</p>
<p>这个文本包含<sup>上标</sup>文本。</p>
更新
正如 @temani-afif 指出的那样，这个问题在 html - CSS :first-letter not working - Stack Overflow 上已经得到回答，只是我没有找到专门涉及 <sub> 和 <sup> 标签的信息，因为该主题中没有提到这些标签。
英文:
It looks like <sub> and <sup> are not supporting the ::first-letter CSS pseudo-element. Any idea how to solve it?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
p:first-letter,
sub:first-letter,
sup:first-letter {
color: red;
font-weight: bold;
}
<!-- language: lang-html -->
<p>This text contains <sub>subscript</sub> text.</p>
<p>This text contains <sup>superscript</sup> text.</p>
<!-- end snippet -->
Update
As @temani-afif pointed out, this was answered on html - CSS :first-letter not working - Stack Overflow, just I wasn't able to find it focusing specifically on <sub> and <sup> tags, which are not mentioned in that topic.
答案1
得分: 2
Sure, here is the translated code section:
/* CSS伪元素`::first-letter`适用于块级元素的第一行的第一个字母，但仅当没有其他内容前置。 */
p:first-letter,
sub:first-letter,
sup:first-letter {
color: red;
font-weight: bold;
}
sub,
sup {
display: inline-block;
}
<!-- HTML部分 -->
<p>这个文本包含<sub>下标</sub>文本。</p>
<p>这个文本包含<sup>上标</sup>文本。</p>
英文:
> The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content.
> -- ::first-letter - CSS: Cascading Style Sheets | MDN
The <sub> and <sup>elements are not block-level elements by default, but using the CSS display Property with the inline-block value
can change this.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
p:first-letter,
sub:first-letter,
sup:first-letter {
color: red;
font-weight: bold;
}
sub,
sup {
display: inline-block;
}
<!-- language: lang-html -->
<p>This text contains <sub>subscript</sub> text.</p>
<p>This text contains <sup>superscript</sup> text.</p>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论