swa*_*i16 8 css pseudo-element
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
p:before {
content:"Former - ";
color:red;
font-family:"Tahoma" ,Times New Roman;
font-size:70%;
}
p.normal:first-letter {
font-size:40px;
color:blue;
}
</style>
</head>
<body>
<p class="normal">First character of this paragraph will
be normal and will have font size 40px;</p>
</body>
</html>
这里,在内容:before伪元素显示为红色,但我也想式"的字符"F" ˚F蓝色这段IRST字符".但相反,我看到" F ormer - " 的" F "为蓝色.
我想要的是将内容之后的两个:before和第一个字母应用于同一段落.这可能吗？如果是这样,怎么样？.normal :before
通常你会使用:first-letter伪元素执行此操作,但看到你有:before内容,它在段落的实际内容之前插入文本,而不是实际内容:first-letter的第一个字母,:before而是匹配内容的第一个字母.
这意味着,而不是这样:
<p class="normal">
<p:before>Former - </p:before>
<p.normal:first-letter>F</p.normal:first-letter>irst character of this paragraph will
be normal and will have font size 40px;
</p>
你真的得到这个:
<p class="normal">
<p:before>
<p.normal:first-letter>F</p.normal:first-letter>ormer -
</p:before>
First character of this paragraph will
be normal and will have font size 40px;
</p>
由于CSS生成的内容的工作原理,我认为只有在插入内容之前,纯CSS中的解决方案才能达到实际内容的第一个字母.
作为替代方案,你可以使用一个span替代的:first-letter伪元素,对此您就可以申请蓝颜色,但是这意味着你必须插入额外的元素:
<p class="normal"><span>F</span>irst character of this paragraph will
be normal and will have font size 40px;</p>
p.normal span {
font-size:40px;
color:blue;
}
小智 1
例如，如果您无法在没有 JavaScript 的情况下编辑 HTML，则可以使用纯 CSS，只要您设计“块级”元素的 :before 或 :after 内容即可。
p:before {
content: 'Wisdom'
}
p:first-letter {
font-size: 7vw;
}<p></p>请注意：::first-letterCSS 伪元素将样式应用于块级元素第一行的第一个字母，但前提是前面没有其他内容（例如图像或内联表格）。
归属： https: //developer.mozilla.org/en-US/docs/Web/CSS/:: first-letter