Pseudo class :first-letter doesn't except display:block or position absolute

Question

I have an issue, I want to put the first letter in the first raw separate from the text, It seems that CSS isn't recognize display:block; or position:absolute to pseudo class of first-letter.

note: I can't add another tag to the first letter.

EXAMPLE

HTML

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

CSS

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

That's what I try to achieve:

Answer 1

Take a look to specs:

Only a small subset of all CSS properties can be used inside a declaration block of a CSS ruleset containing a selector using the ::first-letter pseudo-element:

• All font properties : 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 and font-family.

• All background properties : background-color, background-image, background-clip, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode.

• All margin properties: margin, margin-top, margin-right, margin-bottom, margin-left.

• All padding properties: padding, padding-top, padding-right, padding-bottom, padding-left.

• All border properties: the shorthands border, border-style, border-color, border-width, border-radius, border-image, and the longhands properties.

• The color property

• The text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (when appropriate), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (only if float is none) CSS properties.

As this list will be extended in the future, it is recommended that you not use any other properties inside the declaration block, in order to keep the CSS future-proof.

Now for your problem if you can change your html structure you can use a span for the first letter and style it as you like. For example:

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

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

Answer 2

The first-letter did-not have Position property So That if you want to move your first-letter without using any other element like span in your code, you can use "margin property"

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>

Answer 3

Two Solution Found

First Solution To add to the wrapper element word-break:all; + add to the first letter margin-right:100%; + add some width to the word container;

VIEW EXAMPLE

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

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

Second Solution add to the first-letter float:left; + margin-right:100%; + add some width to the word container;

VIEW EXAMPLE

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

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

from this place I can continue, Alex Char, thanks for trying to help.