9 
<!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 ormer -”的“F”是蓝色的。

我想要的是将内容后面的:before首字母和首字母应用于同一段落。这可能吗？如果是这样，怎么做？.normal :before

4

4 回答 4

8

通常你会用: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 中没有解决方案可以在您在实际内容之前插入内容后到达实际内容的第一个字母。

作为替代方案，您可以使用 aspan代替: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;
}
于 2012-07-29T15:27:54.320 回答
1

你好。

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

p:before {
  content: 'Wisdom'
}

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

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

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

✌干杯，肖恩老。

于 2020-08-17T17:06:28.983 回答
0

将 :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;
}
于 2021-04-15T15:31:51.717 回答
-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>

感谢您的指导 - 我得到了我想象的输出方式，我想要它

于 2012-07-29T18:46:41.477 回答