CODEWITHSUNDEEP
htmlcss
Kanchon Gharami
Kanchon Gharami

Reputation: 949

html list-item marker color changing with inline css only

I have a unordered-list in my html page. I wish to show all the list-item in the same line and with different marker color for each list-item but with using inline css only.

my template:

<ul style="display: inline-block;">
    <li style="before {content: '•'; color: red;}">Leaf</li>
    <li style="before {content: '•'; color: blue;}">Intermediate</li>
    <li style="before {content: '•'; color: green;}">Root</li>
</ul>

It won't work as a wish. How can I do this?

Upvotes: 1

Views: 3797

Answers (4)

A Haworth
A Haworth

Reputation: 36522

If you don't want to change your HTML you can give a background to your li elements instead of a marker.

This snippet uses radial-gradient to draw a disk, but it is very flexible as you can use actual images or several gradients or a combination.

<ul style="width: 100%; list-style-type: none; display: flex; justify-content: space-around; align-items: center;">
  <li style="background-image: radial-gradient(red 0 70%, transparent 70% 100%); background-size: 10px 10px; background-position: 0 50%; background-repeat: no-repeat; padding: 20px;">home</li>
  <li style="background-image: radial-gradient(green 0 70%, transparent 70% 100%); background-size: 10px 10px; background-position: 0 50%; background-repeat: no-repeat; padding: 20px;">content</li>
  <li style="background-image: radial-gradient(blue 0 70%, transparent 70% 100%); background-size: 10px 10px; background-position: 0 50%; background-repeat: no-repeat; padding: 20px;">about</li>
  <li style="background-image: radial-gradient(yellow 0 70%, transparent 70% 100%); background-size: 10px 10px; background-position: 0 50%; background-repeat: no-repeat; padding: 20px;">contact</li>
</ul>

Upvotes: 2

Fenton
Fenton

Reputation: 251012

You can move this into CSS, but it will get verbose as you'd need to anticipate your longest list size - alternatively you could wrap your colour list, for example red -> green -> blue -> back to red. You'd need to use the syntax nth-child(3n - 2) for that.

ul {
    list-style: none;
}

ul li {
    display: inline-block;
}

ul li:nth-child(3n - 2):before {
    content: '•';
    color: red;
}

ul li:nth-child(3n - 1):before {
    content: '•';
    color: green;
}

ul li:nth-child(3n):before {
    content: '•';
    color: blue;
}
<p>Original use case</p>
<ul>
    <li>Leaf</li>
    <li>Intermediate</li>
    <li>Root</li>
</ul>
<p>Example showing the wrapping</p>
<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    <li>Fifth</li>
</ul>

Upvotes: 0

Dhananjayan
Dhananjayan

Reputation: 582

we could use the span to get a expected result. Below you could find the code.

<ul style="display: inline-block;">
    <li style="color: red"><span style="color: #000;">Leaf</span></li>
    <li style="color: blue"><span style="color: #000;">Intermediate</span></li>
    <li style="color: green"><span style="color: #000;">Root</span></li>
</ul>

Upvotes: 5

Yaroslav Trach
Yaroslav Trach

Reputation: 2011

Here an option how to change color of dot:

ul {
  list-style: none;
}

ul li:before {
  content: "\2022";
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
  color: var(--dot-color);
}
<ul style="display: inline-block;">
    <li style="--dot-color: red;">Leaf</li>
    <li style="--dot-color: blue;">Intermediate</li>
    <li style="--dot-color: green;">Root</li>
</ul>

Upvotes: 2

Related Questions