How to absolutely position the baseline of text in HTML

Question

I\'m puzzled by the following problem. I wish to (absolutely) position the baseline of some piece of HTML text at a certain y-coordinate, while the text should be starting a

Answer 1

By default inline-block/inline and text in block are baseline vertical-aligned. Create an pseudo element inside the block you want to move in Y and defining the height of this spacer.

/**
Create a vertical spacer. It will be aligned with the parent's content baseline:
**/
.text::before{
  content: "";
  /*the Y value:*/
  height: 100px;
  width: 0px;
  display: inline-block;
}

/**
The rest (only for this demo)
**/
body{
  font-family: sans-serif;
  font-size: 60px;
  margin: 0;
}
body::before{
  content: "";
  display: block;
  position: absolute;
  top: 100px;
  width: 100%;
  height: 2px;
  margin: -1px 0;
  background-color: #00D500;
  z-index: 1;
}
body::after{
  content: "";
  display: block;
  position: absolute;
  top: 100px;
  left: 200px;
  height: 8px;
  width: 8px;
  margin: -4px;
  border-radius: 50%;
  background-color: #FF0077;
  z-index: 1;
}

.text {
  margin: 0;
  position: absolute;
  /*the X value:*/
  left: 200px;
}
 

css=powerful