CODEWITHSUNDEEP
htmlcss
alancc
alancc

Reputation: 811

How to move the dot of the listing upper a little in CSS?

Below is the CSS code for my listing:

ul.fancy li, .category-page ul li {
    list-style-type: disc;
    padding-left: 20px;
    position: relative;
}

I want to move the dot beside each list item to upper side a little, but keep the list item text location unchanged, so that the final result is, the dot and the list item text is vertically aligned in the middle, see below:

How to implement that? enter image description here

I try to search online, but find this https://www.w3schools.com/cssref/pr_list-style-position.asp which is put the dot inside or outside the list, this Adjust list style image position? is for a custom image.

I try to adjust padding-bottom, but not working. I try to change margin-bottom, but it seems it will change the location of both the dot and the text, which is not desirable.

Upvotes: 2

Views: 864

Answers (2)

Vishal_VE
Vishal_VE

Reputation: 2137

ul{
  list-style: none;
  position: relative;
  padding: 0px;
  margin-left: 28px;
}
ul li{
  margin: 20px 0px 0px;
  position: relative;
  padding-left: 12px;
}
ul li:before{
  content: '.';
  font-size: 40px;
  line-height: 40px;
  top: -24px;
  position: absolute;
  display: block;
  left: 0px;
}
<ul>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat labore, autem, dolor tempora nulla laboriosam maxime quam quod optio repellendus distinctio hic. Illum animi in voluptatem aliquam doloribus minus! Quaerat!</li>
  <li>Illum animi in voluptatem aliquam doloribus minus! Quaerat!</li>
</ul>

Upvotes: 0

Abin Thaha
Abin Thaha

Reputation: 4633

I have created the dot using the pseudo elements in the li, this way you can have full control over the dot, change its color, position, size etc.

ul {
  list-style: none;
  padding: 0;
}
ul li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
ul li::before {
  content: '';
  display: inline-block;
  margin-right: 15px;
  min-width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #000;
}
 <ul>
    <li>A</li>
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat labore, autem, dolor tempora nulla laboriosam maxime quam quod optio repellendus distinctio hic. Illum animi in voluptatem aliquam doloribus minus! Quaerat!</li>
    <li>C</li>
</ul>

Upvotes: 1

Related Questions