如何使用CSS position属性定位伪选择器？first-letter定位失败求助

你的代码里存在重复的left属性（后声明的left:90px会覆盖前者），但核心问题是::first-letter伪元素默认是inline级元素，即便使用绝对定位，也可能因排版特性导致定位不符合预期。

按以下方式修改即可生效：

div {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  text-align: center;
  line-height: 55px;
  width: 300px;
  height: 60px;
  background-color: #d4d4d4;
  color: black;
  margin: auto;
  position: relative;
}

div::first-letter {
  position: absolute;
  top: 0; /* 可根据需求调整垂直位置 */
  left: 10px; /* 设为0可紧贴div左侧 */
  color: white;
  display: block; /* 关键：让伪元素以块级响应绝对定位 */
}

关键要点 #

• 父级设置position: relative是正确的，确保伪元素的定位参考系为父div
• 给::first-letter添加display: block，消除inline元素的排版限制，让绝对定位偏移准确生效
• 清理重复的CSS属性，避免样式冲突

内容的提问来源于stack exchange，提问作者Mazen Ahmed