CODEWITHSUNDEEP
css
Sainesh Mamgain
Sainesh Mamgain

Reputation: 785

is there any way to decrease List bullet size in CSS

Here Is the link of the page on which I am working.

In the CONSULTANT section there is a list. I want to make the bullets size smaller.

I have done CSS:

.career ul li span {
    font-size: 18px;
}
.career ul li{
  font-size: 10px !important;
}

Please help me to make bullets size smaller.

Thanks

Upvotes: 1

Views: 2580

Answers (4)

Beginner
Beginner

Reputation: 21

To reduce the size of bullet list, we can use before pseudo element.

For the list we have to give

ul{
    list-style: none;
}

And then using pseudo element, we can create bullet as per our needed size and content

ul li:before {
    content: ".";
    position: absolute;
}

You can style the positions by giving top,bottom,left, right values.

If you have any queries please check, http://frontendsupport.blogspot.com/2018/05/reduce-bullet-size-in-list.html

Code was taken from the above site.

Upvotes: 0

UI-UX
UI-UX

Reputation: 258

There is no <!DOCTYPE html> in your HTML page. so that you're not able to decrease Bullet size

Upvotes: 3

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13679

You can use :before to create your own bullet and have it's own font-size

.career ul li {
  list-style: none;
}

.career ul li:before {
  content: '■'; 
  vertical-align: middle;
  display: inline-block;
  margin-top: -3px;
  font-size: 12px;
  margin-right: 4px;
}

Fiddle

Upvotes: 2

Beri
Beri

Reputation: 11620

@trainoasis is right, decreasing the font-fize for li works. Tried with ChromeDeveloper tools, but this CSS should do the trick.

.career ul li {
  font-size: 0.5em;
}

Upvotes: 3

Related Questions