changing the position of the the first letter - css

Question

how to change the position of "h" which in "hello" and change its width using css and without modifying the div element,
I have tried the pseudo element first-letter, but it didn't work for me
body {
margin: 0;
}
div {
background-color: gainsboro;
width: 290px;
margin-top: 2%;
margin-bottom: 2%;
margin-right: auto;
margin-left: auto;
padding: 20px;
text-align: center;
}
div::first-letter {
background-color: red;
color: white;
position: absolute;
left: 20px;
}
<div>hello, this my code.</div>

Answer 1

The first-letter is working fine. There is also another method to place the first in the span tag and styling it.
div {
background-color: gainsboro;
width: 290px;
margin-top: 2%;
margin-bottom: 2%;
margin-right: auto;
margin-left: auto;
padding: 20px;
position: relative;
text-align: center;
}
div span {
background-color: red;
color: white;
position: absolute;
left: 20px;
}
<div><span>h</span>ello, this my code.</div>

Answer 2

Use float for this task:
body {
margin: 0;
}
div {
background-color: gainsboro;
width: 290px;
margin-top: 2%;
margin-bottom: 2%;
margin-right: auto;
margin-left: auto;
padding: 20px;
text-align: center;
}
div::first-letter {
background-color: red;
color: white;
float: left;
margin-left: 20px;
margin-right: -20px;
}
<div>hello, this my code.</div>

Answer 3

Hey unfortunately CSS cant select first letter by itself. You can use another div for example;
<h1><span>H</span>ello</h1>
h1 { font-size: 1.3rem;}
h1 span {font-size:1.5rem;}
of course you can address direct name or you can access to that span element in different ways. But dont forget span by itself doesn't change the document placing etc that's why we prefer using this element for actions like that.