gpt4 book ai didi

css - 如何将 CSS 应用于 :before content? 之后的第一个字母

转载 作者:技术小花猫 更新时间:2023-10-29 11:03:31 24 4
gpt4 key购买 nike

<!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”设置样式本段”为蓝色。但相反,我看到“Former - ”的“F”为蓝色。

我想要的是同时应用 :before.normal 的第一个字母 after :before同一段的内容。这可能吗?如果是,怎么办?

最佳答案

通常您会使用:first-letter 伪元素来执行此操作,但看到您有:before 内容,这inserts text before the actual content of your paragraph , 那么 :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;
}

关于css - 如何将 CSS 应用于 :before content? 之后的第一个字母,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11710103/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com