Can't remove text decoration from li tag

1

I have very simple html/css project. I try 3 different browser and i cleared the chache.
I try everywhere text-decoration: none and text-decoration: none !important also.

Please help how can I remove the text decoration “circle” from the front of my

  • tag.

    Thank you

    Here is my HTML

    <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style2.css" />
</head>
<body>
      <div class="product-outer">
          <div class="product-item">
              <h2>Pizza 1</h2>
              <p>500 $</p>
              <ul>
                  <li id="nervous">Excelent</li>
                  <li>Delicious</li>
                  <li>Price friendly</li>
              </ul>
          </div>

           <div class="product-item">
              <h2>Pizza 2</h2>
              <p>1000 $</p>
              <ul>
                  <li>Excelent</li>
                  <li>Delicious</li>
                  <li>Price friendly</li>
              </ul>
          </div>

           <div class="product-item">
              <h2>Pizza 3</h2>
              <p>1500 $</p>
              <ul>
                  <li>Excelent</li>
                  <li>Delicious</li>
                  <li>Price friendly</li>
              </ul>
          </div>

</body>
</html>

    Here is my CSS:

    *:after,
*:before {
  box-sizing: border-box;
  text-decoration: none !important;
}
body {
     text-decoration: none !important;
}
.product-outer {
  display: flex;
  justify-content: space-around;
  width: 100%;
  text-decoration: none !important;
  margin-top: 100px;
  margin-bottom: 100px;
}

.product-item {
  border: 3px solid black;
  width: 25%;
  text-align: center;
  text-decoration: none !important;
}

.product-outer ul {
  text-decoration: none !important;
}

.product-outer li {
  line-height: 2rem;
  text-decoration: none !important;
}

.product-item ul {
  text-decoration: none !important;
}

.product-item li {
  line-height: 2rem;
  text-decoration: none !important;
}

ul, li, .product-item, .product-outer{
  text-decoration: none !important;
  
}

.product-outer .product-item{
      text-decoration: none !important;
}

.product-outer .product-item ul{
      text-decoration: none !important;
}
.product-outer .product-item li{
      text-decoration: none !important;
}

#nervous{
    text-decoration: none !important;
}

    and here is the result:

    exampleTextDecorationNotWork
    exampleTextDecorationNotWork1795×262 22 KB

    • 2

    try using list-style: none; for your Li

    1 Like
    3

    list-style-type: none;

    Thank you. I used this several time and i tun this problem several. And I forrgotten!!! :slight_smile: Thank you very much again :slight_smile:

    4

    @nikolicsmilan77, I realize someone has given you the answer but you could have found this yourself by searching using the text from your title,
    remove text decoration from li tag

    1 Like
    5

    This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.