Removing list bullets without affecting the style

HTML-CSS
1

Hi,
I want to remove the dots from an unordered list the only way I found is using css property list-style-type: none;
but this remove any other style that I specify
Any help.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  
</body>
</html>

body, html{
    margin: 0;
}
.container {
    width: 600px;
    margin: 0 auto;

}
ul {
    list-style-type: none;
}
li:nth-of-type(odd){
    background: lightgray;
   
}
2

text-decoration:none ;
might works as you wish
if you wanna no more browse text-decoration
or visit this link
https://www.w3schools.com/cssref/pr_text_text-decoration.asp

3

What other styles do you have going on? Can you post your code?

4

I tried not working.

5

it’s list-style: none; not

7

Because it is already working. Simply add text texts to your li elements and it will work. I was just showing you a simpler syntax.

1 Like
8

You wont be able to see the li styles until they have some content or size/padding if you remove the bullets.

1 Like
9

What is the concept behind this? The style rules are applied to the whole element not only the content, aren’t they?

10

if there are nothing in your html elements, effectively it takes 0 width and 0 height. So technically styles are getting applied but there is no content to show you styles.

11

Try adding things in the <li> items!

12

Your question was already answered, with no content the element has 0 hight. But here is a bit more info.

The list-styles (bullets etc.) counts as generated content. It is (AFAIK) the generated marker box that gives the li its height even when it has no other content inside it (when list-styles is set to something other than none). The default style given is user agent defined.

12.5 Lists

An element with ‘display: list-item’ generates a principal block box for the element’s content and, depending on the values of ‘list-style-type’ and ‘list-style-image’, possibly also a marker box as a visual indication that the element is a list item.

Generating Marker Boxes: the list-item keyword

The list-item keyword causes the element to generate a ::marker pseudo-element [CSS-PSEUDO-4] with the content specified by its list-style properties (CSS 2.1§12.5 Lists) [CSS2] together with a principal box of the specified type for its own contents.