Live Demo

tips i learned from mahratech :

🔑 pseudo elements as `::after ,::before`

https://css-tricks.com/the-shapes-of-css/

in ::after ,::before we can use in content attribute counter value as this :

for example Create a counter ("my-sec-counter") and increase it by one for each occurrence of the

selector:

body {
   /* Set "section" to 0 */
  counter-reset: section;
}

h1 {
   /* Set "subsection" to 0 */
  counter-reset: subsection;
}

h1::before {
  /* Increment "section" by 1 */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

h2::before {
  /* Increment "subsection" by 1 */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

h2::before {
  /* Decrement "my-sec-counter" by 1 */
  counter-increment: my-sec-counter -1;
  content: "Section " counter(my-sec-counter) ". ";
}

or we can use attr(href as example) as value for content attribute or open-quote or close-quote