How to start unordered list bullet points from the right and separate colors for bullets and texts?-CodePudding

What I'm trying to achieve:

toto -
roto -
moto -

but what I got so far is:

- toto
- moto
- roto

how to achieve this in plain css and html? And how to have separate colors for bullet points and texts?

CodePudding user response：

As @Vikneysh mentioned,

<ul dir="rtl">

is the right way to align it, and the only thing that worked for me for changing colors of those right aligned bullet points were:

ul {
  list-style: none; 
}

ul li::before {
  content: "-"; 
  color: red; /* Change the color */
  display: inline-block; 
  width: 1em; 
  margin-right: -1em; 
}

CodePudding user response：

Style your Unordered list as

 <style>ul { direction: rtl; }</style>

or just use the dir="rtl" attribute value

<ul dir="rtl">

Hope this solves the issue.