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)

JosafKolluri • Jul 2 '20

Please help me to solve above problem

DEV Community

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

Top comments (2)

Read next

Show full text on hover with text-overflow: ellipsis

How to Recreate the Iconic Pegman from Google Maps

🌐 The Ultimate and Most Comprehensive HTML Guide: Basics, Advanced Features, and Secrets to Master HTML 🚀

10 HTML Tricks for Developers