Removing unwanted bullets around elementor's container

Question

I used below CSS code to add bullets in my list in elementor. After that I saw it also has added around elementor's container. Then the elementor didn't work properly.

ul { list-style : none }

li::before {
  content     : "•";
  color       : #07B118;
  display     : inline-block; 
  width       : 1em;
  margin-left : -1em
}    

ul { list-style: none }

li:before { 
  content   : "•"; 
  font-size : 23pt; 
}

}

I try some CSS codes to remove them. But it wasn't effective.
How can I get rid of these bullets?? By the way, I can't remove this code since the arrangement of my content will face with problem.

Answer 1

The issue is that by setting styles on ul and li you are targeting every element of that type on the entire page.

Instead, you need to add a custom CSS class to your widget in Elementor, then in your stylesheet, target just that class.

ul.my-custom-class { ... rules here ... } 
ul.my-custom-class li { ... rules here ... }