CODEWITHSUNDEEP
htmlcss
Sarahdactyl
Sarahdactyl

Reputation: 11

Lists with coloured numbers and <strong> elements

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.sstatic.net/kL0io.png [2]: https://i.sstatic.net/M8vhz.png

Upvotes: 0

Views: 56

Answers (1)

yuxufabio
yuxufabio

Reputation: 61

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>

Upvotes: 2

Related Questions