I am attempting to customize the appearance of specific list items within a ul element. One li element should be displayed in red font, while another li element should have a hyperlink styled with a different color and an underline rollover effect. The third li element should also have a hyperlink with an underline rollover effect, but maintain the standard link color.
Can anyone provide guidance on how I can achieve this? Thanks in advance for any assistance.
ul.standard-list{
padding:0px 0 50px 00000;
margin:0;
text-align:left;
color:#333;
font-weight:100;
font-family:verdana,arial,"Times New Roman", Times, serif,georgia,serif,helvetica;
font-size:20px;
-webkit-font-smoothing: antialiased; /* subtley makes fonts smoother */
line-height:28px;
}
ul.standard-list a:link{
color:#008CBA;
text-decoration:none;
}
ul.standard-list a:visited{
color:#008CBA;
text-decoration:none;
}
ul.standard-list a:hover{
color:#008CBA;
text-decoration:underline;
}
ul.standard-list li{
list-style-type: none;
line-height:28px;
}
ul.standard-list li:before{
/* Unicode bullet symbol */
content: '\2022';
/* Bullet color */
color: #008CBA;
padding-right: 10px;
}
.standard-list.no-list-decoration{
color:red;
}
.standard-list.link-2 a:hover{
text-decoration:underline;
}<ul class="standard-list">
<li><a href="http://google.co.uk">linked, underlined in different colour with underline rollover effect</a></li>
<li class="no-list-decoration">red</li>
<li class="link-2"><a href="http://google.co.uk">linked, underlined rollover effect but same colour as normal list style</a></li>
<li>four</li>
<li>five</li>
</ul>