Build a S The li inside the ul with the class sub-item should have an anchor element with the class sub-item-lintylized To-Do List - Build a Stylized To-Do list

HTML-CSS
1

Tell us what’s happening:

The li inside the ul with the class sub-item should have an anchor element with the class sub-item-link.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Styled To-Do List</title>
    <link href="styles.css" rel="stylesheet">
</head>

<body>
<div class="design">
<h1>A<sup>2</sup>Mechatronics</h1> 
<ul class="todo-list"> 
<li> 
    Designs      
<input type="checkbox" id="Design">
<label for="Design">Machine Design</label>
<ul class="sub-item"> 
<li> <a class="sub-item-link" href="https://encrypted-tbn0.gstatic.com/images?" target="_blank">CNC design 01</a> </li>
<li> <a class="sub-item-link" href="https://encrypted-tbn0.gstatic.com/images?" target="_blank">CNC design 02</a> </li>
<li> <a class="sub-item-link" href="https://encrypted-tbn0.gstatic.com/images?" target="_blank">CNC design 03</a> </li>
<li> <a class="sub-item-link" href="https://encrypted-tbn0.gstatic.com/images?" target="_blank">CNC design 04</a> </li>
    </ul>
</li>
<li>
    Sample 
<input type="checkbox" id="Demo">
<label for="Demo">Sample Demo</label>
<ul class="sub-item">
<li> <a class="sub-item-link" href="https://encrypted-tbn0.gstatic.com/images?" target="_blank">Leath machine1</a> </li>
<li> <a class="sub-item-link" href="https://encrypted-tbn0.gstatic.com/images?" target="_blank">Leath machine2</a> </li>
<li> <a class="sub-item-link" href="https://encrypted-tbn0.gstatic.com/images?" target="_blank">Leath machine3</a> </li>
<li> <a class="sub-item-link" href="https://encrypted-tbn0.gstatic.com/images?" target="_blank">Leath machine4</a> </li>
    </ul> 
</li>
<li>
    System    
<input type="checkbox" id="System">
<label for="System">System Design</label>
<ul class="sub-item"> 
<li> <a class="sub-item-link" href="https://encrypted-tbn0.gstatic.com/images?" target="_blank">CNC design</a> </li>
<li> <a class="sub-item-link" href="https://encrypted-tbn0.gstatic.com/images?" target="_blank">CNN design</a> </li>
<li> <a class="sub-item-link" href="https://encrypted-tbn0.gstatic.com/images?" target="_blank">Press machine</a> </li>
<li> <a class="sub-item-link" href="https://encrypted-tbn0.gstatic.com/images?" target="_blank">Weldding machine</a> </li>
    </ul>  
</li>
<li>
    Products    
<input type="checkbox" id="Goods">
<label for="Goods">Manufactured equipment</label>
<ul class="sub-item"> 
<li> <a class="sub-item-link" href="https://encrypted-tbn0.gstatic.com/images?" target="_blank">AC Design</a> </li>  
<li> <a class="sub-item-link" href="https://encrypted-tbn0.gstatic.com/images?" target="_blank">CNC design</a> </li>
<li> <a class="sub-item-link" href="https://encrypted-tbn0.gstatic.com/images?" target="_blank">Leath machine</a> </li>
<li> <a class="sub-item-link" href="https://encrypted-tbn0.gstatic.com/images?" target="_blank">Leath M</a> </li>
    </ul> 
</li>
</ul>
</div>
</body>
</html>

/* file: styles.css */
body {
font-family: Arial, sans-serif;
color:gray;
}
.todo-list {
  width: 300px;
  height: 25px;
  color: rgb(146, 7, 7);
}
label {
  color:green;
}
a {
  text-decoration: none;
  color: black; 
}
a:hover {
  color: blue;
}
a:visited {
  color: red;
}
a:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}
a:active {
  color: green;
}
a:

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36

Challenge Information:

Build a Stylized To-Do List - Build a Stylized To-Do list

2

Which line of code meets that condition?