伪类：第一个字母不显示：块或位置绝对

Question

我有一个问题，我想把第一个字母放在第一个原始文本中，似乎CSS不识别display：block;或者位置：绝对到第一个字母的伪类。

注意：我无法在第一个字母上添加另一个标记。

EXAMPLE

HTML

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

CSS

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

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

Answer 1

看看specs：

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

• 所有字体属性：font，font-style，font-feature-settings，font-kerning，font-language-override，font-stretch，font-synthesis，font-variant，font-variant-alternates， font-variant-caps，font-variant-east-asian，font-variant-ligatures，font-variant-numeric，font-variant-position，font-weight，font-size，font-size-adjust，line-height和字体家庭。

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

• 所有保证金属性：保证金，保证金顶部，保证金权利，保证金底部，保证金左边。

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

• 所有边框属性：短边框边框，边框样式，边框颜色，边框宽度，border-radius，border-image和longhands属性。

• 颜色属性

• 文字装饰，文字阴影，文字转换，字母间距， 字间距（适当时），行高，文字装饰色， text-decoration-line，text-decoration-style，box-shadow，float， vertical-align（仅当float为none时）CSS属性。

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

现在针对您的问题，如果您可以更改您的html结构，您可以使用span作为第一个字母，并根据需要设置样式。例如：

＆＃13;

＆＃13;

.some-word span {
  font-size: 50px;
  position: relative;
  padding-right: 10px;
}

＆＃13;

<div class="some-word">
  <span>P</span>roduct
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

找到两个解决方案

第一个解决方案 要添加到包装元素 word-break：all; +添加到第一个字母margin-right：100％; +为单词容器添加一些宽度;

VIEW EXAMPLE

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

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

第二种解决方案 添加到第一个字母 float：left; + margin-right：100％; +为单词容器添加一些宽度;

VIEW EXAMPLE

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

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

从这个地方我可以继续， Alex Char，感谢您的帮助。

Answer 3

第一个字母没有位置属性 因此，如果您想在不使用代码中的任何其他元素（如跨度）的情况下移动第一个字母，则可以使用“边距属性”

div {
  background-color: #d4d4d4;
  padding: 20px 25px 20px 35px;
  margin: auto;
  width: fit-content;
}

div::first-letter {
  background-color: #ff0000;
  padding: 9px 7px;
  color: #ffffff;
  margin-left: -45px;
  margin-top: -9px;
}

  <div>1 Hello, Welcome To Elzero Web School</div>