如何将CSS应用于:before内容后的第一个字母？

Question

如何将CSS应用于:before内容后的第一个字母？

10

<!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 伪元素中的内容是红色显示的，但我还想将 "First character of this paragraph" 中的字符 "F" 设为蓝色。但实际上，我看到的是 "Former - " 中的 "F" 是蓝色的。

我想要的是将 :before 和 .normal 的第一个字母（在 :before 内容之后）应用于同一段落。这是否可能？如果是，应该怎么做？

- swati16

可能是重复的问题：css选择器：div内第一个段落的第一个字母 - Felix Kling

如果您想知道如何将相同的规则用于多个选择器：https://dev59.com/M2865IYBdhLWcg3wCqLI。至于书籍/网站建议：这类主观问题不适合在本网站讨论。 - Felix Kling

@Šime Vidas：我决定下定决心，对这个问题进行了非常必要的重写。 - BoltClock

1

@Felix Kling：经过一系列错误的编辑，我已经确定这是在询问完全不同的事情。 - BoltClock

@BoltClock：我不确定规则的应用顺序。对你的努力点个赞。 - Felix Kling

顺便说一句：如果可以的话，您可以将 :before 更改为 :after，并使用绝对定位在容器之前视觉上放置它，但在语义上仍然在其后（从而允许 ::first-child 起作用）；这不是一个足够好的解决方案，无法发布为答案，但在我看来它有其优点。 - user719662

4个回答

1

如果您无法编辑HTML（例如没有JavaScript），则可以使用纯CSS，只要您在样式化“块级”元素的:before或:after内容即可。

p:before {
  content: 'Wisdom'
}

p:first-letter {
  font-size: 7vw;
}

<p></p>

请注意：CSS伪元素::first-letter会将样式应用于块级元素第一行的第一个字母，但仅在没有其他内容（例如图像或内联表格）之前才会应用该样式。

归属：https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

- Sean Sr

1

将:before更改为:after，并只使用绝对定位，如user719662建议的。

p:after {  
  position: absolute;
left: 0;
content:"Former - "; 
color:red;
font-family:"Tahoma" ,Times New Roman;
font-size:70%;
}

p.normal:first-letter {
  font-size:40px;
color:blue;
}

- Matoeil

-1

<!DOCTYPE html>
<html lang="en">
  <head>

    <title>Complicated pseudo element and span</title>

    <style type="text/css">
      <!--
      p:before {  
           content:"Read this -"; 
           color:red;
           font-family:"Tahoma" ,Times New Roman;
           font-size:100%;}

            .span {
                   font-size:40px;
              color:blue; 
                 } 

         -->
   </style>

  </head>
  <body>

    <p><span style="color:blue; font-size:30px" >F</span>irst character of this paragraph
        will be normal and will have font size 40px;</p>

  </body>
</html>

感谢指导-我得到了我想要的输出结果

- swati16

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

通常情况下，你可以使用:first-letter伪元素来实现这一点，但是因为你有:before内容（将文本插入到段落的实际内容之前），所以与其匹配实际内容的第一个字母，:first-letter会匹配:before内容的第一个字母。
这意味着不是这样：
 <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: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; 

由于CSS生成内容的工作方式，我认为在插入内容之前找到实际内容的第一个字母是没有纯CSS解决方案的。
作为替代方案，你可以使用代替:first-letter伪元素，然后对其应用蓝色，但这意味着你必须插入额外的元素：
First character of this paragraph will be normal and will have font size 40px;

p.normal span { font-size:40px; color:blue; }