Creating a Celcius Display in HTML

Image by Dave Boardman from Pixabay

Scenario

We want the degree symbol not included in the characters of the Celcius rendering such that the text can be centered vertically within our Flexbox.

Approach

We will render the degree HTML entity using absolute positioning, as this take it out of the document flow such that the text appears centered within our flex container. This is our HTML Markup.

<main>
   <div class="Degrees">44</div>
   <div class="Celcius">Celcius</div>
</main>

And we’ve styled it like this.

body {
  font-family: 'Roboto', sans-serif;
}

.Degrees::after {
  position: absolute;
  content: '°';
  top: 0;
  right: -1rem;
}
.Degrees {
  position: relative;
  color: #120f0f;
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 3rem;
}

.Celcius {
  color: gray;
}

Demo

HTML Temperature Display - StackBlitz