changing the position of the the first letter-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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.