دکوریشن لینک ها رو چجوری تغییر بدم

سلام وقتتون بخیر

  <div id="section-2" 
  style=":visited{color: rebeccapurple;};:active{color: aquamarine;};:link{color: chartreuse;}:hover{color: mediumvioletred;}">
    <h2>Our Lesson</h2>
    <ul>
      <li><a href="https://roocket.ir/lesson1.html">Lesson 1</a></li>
      <li><a href="https://roocket.ir/lesson2.html">Lesson 2</a></li>
      <li><a href="https://roocket.ir/lesson3.html">Lesson 3</a></li>
      <li><a href="https://roocket.ir/fixing.html">Lesson 4</a></li>
      <li><a href="https://roocket.ir/fixing.html">Lesson 5</a></li>
      <li><a href="https://roocket.ir/fixing.html">Lesson 6</a></li>
      <li><a href="https://roocket.ir/fixing.html">Lesson 7</a></li>
    </ul>
  </div>

این کد من هست و وقتی اینو باز میکنم section-2 لینک ها میخوام رنگشون رو عوض کنم و شکل لینک نباشن مثل دکمه باشن که وقتی کلیک بشن وارد یه صفحه دیگه بشم باید از کلید استفاده کنم؟
الان این شکلی هست ولی وقتی باز میکنمش لینک هام رنگ نگرفتن با اینکه با سودو کلاس های visited ,link,active,hoverبهش استایل دادم ولی همون حالت عادی هستن
اینو هم تست کردم ولی نشد

<div id="section-2" >
    <h2>Our Lesson</h2>
    <ul>
      <li><a href="https://roocket.ir/lesson1.html">Lesson 1</a></li>
      <li><a href="https://roocket.ir/lesson2.html">Lesson 2</a></li>
      <li><a href="https://roocket.ir/lesson3.html">Lesson 3</a></li>
      <li><a href="https://roocket.ir/fixing.html">Lesson 4</a></li>
      <li><a href="https://roocket.ir/fixing.html">Lesson 5</a></li>
      <li><a href="https://roocket.ir/fixing.html">Lesson 6</a></li>
      <li><a href="https://roocket.ir/fixing.html">Lesson 7</a></li>
    </ul>
  </div>

من این کده رو نوشتم
بهش text-decoration: none;
دادم ولی خط زیر لیست هام پاک نمیشه
این css هست

#section-2{
  text-decoration: none;
}
.new-words{
  text-decoration: none;
}
html{
  text-decoration: none;
}