CSS 伪元素 ::first-letter - 易学教程，面试笔记经验！

::first-letter 伪元素用于将特殊效果或样式应用于块级元素第一行的第一个字母。仅当元素前面没有任何其他内容（例如图像或内联表格）时才适用。

伪元素 ::first-letter 在以下情况下适用于文本的第一个字母:

匹配时考虑第一个字母之前或之后的标点符号。
有些语言具有一起大写的二合字母，在这种情况下，二合字母的两个字母都通过 ::first-letter 伪元素匹配在一起。
: :first-letter 伪元素会匹配新生成的内容的第一个字母，当::before 伪元素和 content 属性结合时，在元素的开头添加一些文本。

一小部分 CSS 属性可以与 ::first-letter 伪元素一起使用，如下所示:

font相关属性
background相关属性
margin相关属性。
padding相关属性。
border相关属性。
color属性
text-decoration
text-shadow
text-transform
letter-spacing
word-spacing
如果没有浮动:line-height，text-decoration-color，text-decoration-line、text-decoration-style、box-shadow、float、vertical-align

语法

selector::first-letter {
   /* ... */
}

CSS ::first-letter 示例

这里是一个示例，展示伪元素 ::first-letter 的简单用法:

<html>
<head>
<style>
   #flavor {
      display: block;
      font-size: 18px;
      color: black;
      width: 500px;
   }

   li {
      padding: 5px 5px;
      font-size: 16px;
      color: black;
      background-color: #fff;
      margin-top: 25px;
      width: 300px;
      transition: all 0.3s ease;
   }

   li::first-letter {
      font-size: 2em;
      color: crimson;
   }
</style>
</head>
<body>
   <form>
      <ul id="flavor">
       喜欢的运动:
       <li> 足球</li>
       <li> 篮球</li>
       <li> 乒乓球</li>
       <li> 羽毛球</li>
       <li> 网球</li>
      </ul>
   </form>
</body>
</html>

这是另一个在文本开头包含特殊字符的示例:

<html>
<head>
<style>
   p::first-letter {
      color: blue;
      font-size: 2.5em;
   }
</style>
</head>
<body>
   <p>-百度</p>
   <p>_易学教程</p>
   <p>"搜狐</p>
   <p>#网易</p>
</body>
</html>