Css 伪类：第一个字母不'；t除显示外：块或绝对位置

我有一个问题，我想把第一个字母在第一个原始文本中分开，似乎CSS不识别显示：块；或位置：绝对到伪类的第一个字母

---

注意：我无法在第一个字母中添加其他标记

HTML

<div class="some-word">
  Product
</div>

这就是我努力实现的目标：

看看：

在包含选择器的CSS规则集的声明块中，只能使用所有CSS属性的一小部分，该选择器使用：：first-letter伪元素：

• 所有字体属性：字体、字体样式、字体功能设置、字体紧排、字体语言覆盖、字体拉伸、字体合成、字体变体、字体变体替换、字体变体大写、字体变体东亚、字体变体连字、字体变体数字、字体变体位置、字体重量、字体大小、字体大小调整、，行高和字体系列

• 所有背景属性：背景颜色、背景图像、背景剪辑、背景原点、背景位置、背景重复、背景大小、背景附件和背景混合模式

• 所有页边距属性：页边距、页边距顶部、页边距右侧、页边距底部、页边距左侧

• 所有填充属性：填充、顶部填充、右侧填充、底部填充、左侧填充

• 所有边框属性：速记边框、边框样式、边框颜色、边框宽度、边框半径、边框图像和长柄属性

• 颜色属性

• 文字装饰、文字阴影、文字变换、字母间距、， 字距（适当时）、行高、文字装饰颜色、， 文字装饰线、文字装饰样式、框阴影、浮动、， 垂直对齐（仅当float为none时）CSS属性

由于此列表将在将来扩展，建议您不要在声明块中使用任何其他属性，以保持CSS的未来性

现在解决您的问题，如果您可以更改html结构，您可以对第一个字母使用

span

，并根据需要设置样式。例如：

。一些单词span{
字体大小：50px；
位置：相对位置；
右边填充：10px；
}

产品

找到两个解决方案

第一种解决方案 添加到包装器元素分词：all+添加到第一个字母右边空白处：100%；+为单词容器添加一些宽度

第二种解决方案 添加到第一个字母float:left+右边距：100%；+为单词容器添加一些宽度

从这里我可以继续， Alex Char，谢谢您的帮助。

第一个字母没有Position属性 因此，如果希望在代码中不使用任何其他元素（如span）而移动第一个字母，可以使用“margin属性”

div{
背景色：#D4；
填充：20px 25px 20px 35px；
保证金：自动；
宽度：适合的内容；
}
第一个字母{
背景色：#ff0000；
填充：9px 7px；
颜色：#ffffff；
左边距：-45px；
利润上限：-9px；
}

---

1您好，欢迎来到Elzero网络学校

我无法在第一个字母中添加其他标签。文本是否允许使用javascript？

.some-word:first-letter{
  font-size:30px;
  display:block; /**doesnt work**/
  position:absolute;/**doesnt work**/
}

.some-word{
  overflow:hidden;
  width:70px;
  word-break: break-all; 
}

.some-word:first-letter{
  font-size:30px;
  margin-right:100%;  
}

.some-word{
  overflow:hidden;
  width:70px;  
}

.some-word:first-letter{
  font-size:30px;
  margin-right:100%;  
  float:left;
}