How can we display a half digit as shown as above using HTML and CSS?

#html #csstricks

I had a doubt about above image. How can we display a half digit as shown as above using HTML and CSS? if anyone know , please help me?

Top comments (2)

Adnan Rizvan • Jul 2 '20 • Edited

You can use the before pseudo-element to achieve this. For example:

CSS

section {
  position: relative;
  overflow: hidden;
  display: block;
  height: 300px;
  width: 100%;
  background: red;

  &::before {
    content: '02';
    position: absolute;
    top: -25px;
    left: -15px;
    color: yellow;
    font-size: 60px;
  }
}

HTML

<section>...</section>

Edit: In order to make the number dynamic, you can set a data attribute on the section like data-section-id and in css use content: attr(data-section-id)