-1

I have a design like:

enter image description here

Where I have custom numbering style for my <ol> list items. The issue I'm facing is that I have a heading and subheading as the contents of the <li> and I can't seem to get it into the vertical stack that the design wants...

So far I have tried:

* {
  font-family: arial;
}

ol {
  list-style: none;
  counter-reset: test;
}

li {
  counter-increment: test;
}

li:before {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  padding-left: 7px;
  box-sizing: border-box;
  display: inline-flex;
  text-align: center;
  align-items: center;
  content: counter(test);
  background: black;
  color: white;
}

.head {
    font-weight: bold;
}
<ol>
  <li>
      <div class="head">Item 1</div>
      <div class="sub-head">Some text</div>
  </li>
</ol>

As you can see, I have the number styled, but I am seeing that the actual contents are columnised...

If I add display: inline-flex; to the <li> it sets them all in a row but then I can't seem to get the contents into a column... Without adding a wrapper to them.

Is there a way in which I can achieve my desired look without having to add a wrapper to the contents?

physicsboy
  • 5,656
  • 17
  • 70
  • 119

2 Answers2

1

What you can do is to give the <li> element a uniform left padding, and then simply absolutely position the ::before pseudo element to the left of the element using left: 0.

I have annotated the additional styles with CSS comments in the proof-of-concept below:

* {
  font-family: arial;
}

ol {
  list-style: none;
  counter-reset: test;
}

li {
  counter-increment: test;
  
  /* Added styles */
  position: relative;
  padding-left: 32px;
}

li::before {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  content: counter(test);
  background: black;
  color: white;
  
  /* Added styles */
  position: absolute;
  left: 0;
}

.head {
  font-weight: bold;
}
<ol>
  <li>
    <div class="head">Item 1</div>
    <div class="sub-head">Some text</div>
    <div class="sub-head">Some text</div>
    <div class="sub-head">Some text</div>
  </li>
</ol>
Terry
  • 63,248
  • 15
  • 96
  • 118
-1

You don't need to create a new counter, you can style the marker directly

https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position

Sadiq Salau
  • 119
  • 5
  • It seems that the `::marker` is only to make simple changes to the marker. Allowable property changes are: All font properties, white-space, color, text-combine-upright, unicode-bidi and direction properties, content property, animation and transition properties... Nothing to do with background or size of it etc. – physicsboy Sep 12 '22 at 12:04