CODEWITHSUNDEEP
csshtml4
Arif Burhan
Arif Burhan

Reputation: 505

is it possible to have html list with dots on right?

My html:

<!DOCTYPE html>
<html>
<head>
    <style>
        li {
            font-weight: bold;
            text-align: right;
        }
    </style>
</head>
<body>
    <li>Consultation</li>
    <li>Pharmacist</li>
    <li>Registration No.</li>
</body>
</html>

Currently the bullet-points appear to the left of the list items ;

Can I make the dots go on the right ?

Upvotes: 3

Views: 4289

Answers (5)

Cornest
Cornest

Reputation: 269

You can use direction: rtl;. The direction property specifies the text direction/writing direction.

Tip: Use this property together with the unicode-bidi property to set or return whether the text should be overridden to support multiple languages in the same document.

Upvotes: 1

Pbk1303
Pbk1303

Reputation: 3802

i) direction:rtl; should do the trick, since you have added text-align:right to the li, the li is right aligned. play around and you will be able to use it to suit your needs

DEMO

CSS:

li{
            font-weight:bold;
            text-align:right;
            direction:rtl;}

ii) In case if you are looking to add "*" required symbol next to each item like the one you mentioned in the url. You can do the below.

DEMO

CSS:

li {
    display:block;
    list-style:none;
}
li:after {
      content:"*";
}

iii) Or you can set the list-style-type:none and set background image for the bullet like in this example: Background images for bullet

Upvotes: 3

smdsgn
smdsgn

Reputation: 1746

If you want the bullet-points to the right but with text align left

li {
  display:block;
  list-style:none;
  width: 200px;
  position: relative;
}

li::after {
    content: "•";
    display: inline-block;
    position: absolute;
    right: 0;
}
<ul>
  <li>Consultation</li>
  <li>Pharmacist</li>
  <li>Registration No.</li>  
</ul>

Upvotes: 0

ewcoder
ewcoder

Reputation: 272

Here's something that you could do.

`<style>
li {
list-style-type:none;
}
</style>`

^ That will get rid of the bullets

then manually add in • inside of your li tag

for example <li>Consultation •</li>

Upvotes: -1

Jared Farrish
Jared Farrish

Reputation: 49208

Use direction: rtl; to make text and list item bullets orient right-to-left.

li {
  font-weight: bold;
  text-align: right;
  direction: rtl;
}

https://jsfiddle.net/tyew2s8f/

More Reading

Upvotes: 2

Related Questions