Creating a Celcius Display in HTML


Image by Dave Boardman from Pixabay


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.


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.

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

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;




Ole Ersoy

Founder of Firefly Semantics Corporation