CODEWITHSUNDEEP
javascriptjquerycssbootstrap-4sass
agoumi
agoumi

Reputation: 494

2 different markers in ordered list

I was sent this as part of a project mockup to realize, but when it comes to this one I have no idea how to make this happen.

I have an ordered list in which there is 2 diffrent markers with a styled dot, does anyone know how to make this happen.

Here is a screenshot of what it should look like

screenshot

And here is a snippet of the code

.pj__list {
  padding-left: inherit;
  li {
    font-weight: bold;
  }
  li::marker {
    content: #{$dot} counter(list-item) ". ";
  }
}
<ol class="pj__list">
  <li class="my-2"> Bulletin de salaire </li>
  <li class="my-2"> Copie de la CIN </li>
  <li class="my-2"> Attestation de travail </li>
</ol>

Upvotes: 3

Views: 170

Answers (3)

Pete
Pete

Reputation: 58442

You can change the list style to bullets and then use a counter for your numbers:

.pj__list {
  list-style-type: disc;
  counter-reset: list;
}

.my-2 {
  counter-increment: list;
  padding-left: 1.5em;
}

.my-2:before {
  content: counter(list) ".";
  display: inline-block;
  width: 1.5em;
  margin-left: -1.5em;
}
<ol class="pj__list">
  <li class="my-2">Bulletin de salaire</li>
  <li class="my-2">Copie de la CIN</li>
  <li class="my-2">Attestation de travail</li>
</ol>

if you need the discs to be a different colour, you will need to add a span:

.pj__list {
  list-style-type: disc;
  counter-reset: list;
}

.my-2 {
  color: orange;
}

.my-2 span {
  color: black;
  display: inline-block;
  counter-increment: list;
  padding-left: 1.5em;
}

.my-2 span:before {
  content: counter(list) ".";
  display: inline-block;
  width: 1.5em;
  margin-left: -1.5em;
}
<ol class="pj__list">
  <li class="my-2"><span>Bulletin de salaire</span></li>
  <li class="my-2"><span>Copie de la CIN</span></li>
  <li class="my-2"><span>Attestation de travail</span></li>
</ol>

Upvotes: 2

Savageville
Savageville

Reputation: 22

Here's what i did to solve this issue:

.my-2 {
  list-style-position: inside;
}
.my-2::before {
  content: "•";
  float: left;
  padding-right: 5px;
  color: yellow;
  
}
    <ol class="pj__list">
        <li class="my-2"> Bulletin de salaire    </li>
        <li class="my-2"> Copie de la CIN        </li>
        <li class="my-2"> Attestation de travail </li>
    </ol>

Upvotes: 1

Tom Gionfriddo
Tom Gionfriddo

Reputation: 430

As you have had initially provided only HTML, my suggestion would be to change the list to an unordered list, and manually add the numbers

like so

<ul class="pj__list">
    <li class="my-2">1. Bulletin de salaire</li>
    <li class="my-2">2. Copie de la CIN</li>
    <li class="my-2">3. Attestation de travail</li>
</ul>

Upvotes: 0

Related Questions