0

I'm trying to make a list that has the number in a coloured circle:

![screenshot][1]

I was able to achieve this by using a :before element and a counter (something like this: How to add a CSS background for ::marker in list?), but then discovered that this doesn't indent the second line.

So I switched to display: flex;, which with a few tweaks to alignment worked great (and meant the circles stayed round easier)! Except now the many, many <strong> elements I need to use in the list have gone awry, which from what I can tell is Just How It Is.

I was able to get the result that I wanted by adding a <p> to each list item (example: <li><p>Click on the <strong>Inbox</strong> in the global navigation.</p></li>), but this is clunky and will cause problems for colleagues trying to use the same kind of list but with less coding skills.

Is there a more elegant way of doing this that gets the coloured circle but also lets me use <strong>? I can't just use a <span> with bold font as I need the semantic meaning of strong for accessibility reasons.

Edit:

Original code, where the second line of wrapped text wasn't indented: [enter image description here][2]

/*settings for whole list <ol> */
.round-number-list-b {
    margin-left: 0 !important;
    padding-left: 0 !important;
    counter-reset: item;
}

/*settings for list items <li> */
.round-number-list-b > li {
    margin-left: 0;
    padding-left: 0;
    counter-increment: item;
    list-style: none inside;
    margin-bottom: 0.5rem
}

/*settings for actual number */
.round-number-list-b > li:before {
    display: inline-block;
    width: 1.5rem;
    aspect-ratio: 1/1;
    content: counter(item);
    padding: 0.1rem;
    margin-right: 1.2rem;
    font-weight: 900;
    color: white;
    background: #005577;
    border-radius: 5rem;
    overflow: visible;
    text-align: center;
}

Additions for the second iteration (the rest of the code was the same)

.round-number-list > li {
display: flex;
align-items: flex-start;
}

.round-number-list > li:before {
flex: 0 0 1.3rem;
}

This is what caused problems with the <strong> elements [1]: https://i.stack.imgur.com/kL0io.png [2]: https://i.stack.imgur.com/M8vhz.png

Sarahdactyl
  • 11
  • 1
  • What do you mean by *this doesn't indent the second line*? Also please read [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) – Frank Fajardo Sep 20 '22 at 00:59
  • Also, this might help: [CSS Tricks: Style List Markers in CSS, by Chris Coyier](https://css-tricks.com/style-list-markers-css/) – Frank Fajardo Sep 20 '22 at 01:08
  • I've edited to added the MRE, and a screenshot of the second line wrap – Sarahdactyl Sep 20 '22 at 01:31
  • it is hard to tell how your CSS works without your markup (HTML). But you should check the link to CSS Tricks article in my earlier comment – Frank Fajardo Sep 20 '22 at 01:55

1 Answers1

1

Using the ::before selector, counter and a little bit of tweaking:

ol {
  counter-reset: count;
  list-style: none;
  padding: 10px 50px;
  font-weight: 500;
}
ol li {
  margin: 0 0 0.5rem 0;
  counter-increment: count;
  position: relative;
}
ol li::before {
  content: counter(count);
  color: #fff;
  font-size: .8rem;
  font-weight: bold;
  position: absolute;
  --size: 23px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  background: #a1a;
  border-radius: 50%;
  text-align: center;
}
<ol>
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
  <li><p>Click on the <strong>Inbox</strong> in the global navigation.</p></li>
</ol>
yuxufabio
  • 51
  • 5