如何用CSS移动hello首字母h的位置并修改宽度，且不改动div元素

安全阿岳

2026-8-16

解决方案

原代码中使用::first-letter未达预期的原因有三点：

父元素div未设置定位上下文，导致position:absolute的伪元素相对于body定位，而非目标div
::first-letter默认是inline状态，无法直接设置宽度
绝对定位会让首字母脱离文档流，未处理后续文本的排版衔接

方案一：使用绝对定位（自定义位置）

修改后的CSS代码：

body {
  margin: 0;
}

div {
  background-color: gainsboro;
  width: 290px;
  margin: 2% auto;
  padding: 20px;
  text-align: center;
  position: relative; /* 为伪元素提供定位上下文 */
}

div::first-letter {
  background-color: red;
  color: white;
  position: absolute;
  left: 25px; /* 相对于div左侧的偏移量，可自行调整 */
  width: 45px; /* 设置首字母宽度 */
  display: inline-block; /* 转为行内块，使宽度属性生效 */
  text-align: center; /* 让首字母在设定宽度内居中 */
}

方案二：使用transform偏移（不脱离文档流）

如果不想破坏原有文本流，可改用transform调整位置，同时设置宽度：

body {
  margin: 0;
}

div {
  background-color: gainsboro;
  width: 290px;
  margin: 2% auto;
  padding: 20px;
  text-align: center;
}

div::first-letter {
  background-color: red;
  color: white;
  width: 45px;
  display: inline-block;
  transform: translateX(-30px); /* 向左偏移30px，可按需修改方向和数值 */
}