Olá galera, estou fazendo meu primeiro projeto pessoal, e estou com um problema no meu código, não estou conseguindo de maneira nenhuma remover o sublinhado de um link. Se alguém tiver uma dica do que posso fazer, ou de como posso melhorar meu código.
Essa é a parte HTML do código:
<a href=""class="box1">
<div>
<img src="imagens/porcentagem.png" alt="simbolo-porcentagem">
<p class="subtitulo">Redução de DBO</p>
</div>
</a>
<a href=""class="box2">
<div>
<img src="imagens/balanco.png" alt="imagem-balanco">
<p class="subtitulo">Balanço Iônico</p>
</div>
</a>
<a href=""class="box3">
<div>
<img src="imagens/rio.png" alt="imagem-rio">
<p class="subtitulo">Cálculo IQA</p>
</div>
</a>
<a href=""class="box4">
<div>
<img src="imagens/poluicao.png" alt="simbolo-usina-nuclear">
<p class="subtitulo">Cálculo Carga Poluidora</p>
</div>
</a>
</div>
</main><!--fim do conteúdo principal-->E essa é a parte CSS do código:
/** formatação parte principal**/
a div img{
max-width: 80%;
max-height: 80%;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
}
a div img + p{
text-decoration: none;
text-align: center;
color: black;
margin-top: 10px;
}
#principal{
width: 900px;
height: 480px;
display: flex;
margin: auto;
justify-content: center;
align-items: center;
}
.box1, .box2, .box3, .box4{
width: 380px;
height: 230px;
margin: 5px;
border-radius: 10px;
}
.box1{
background: white;
display: block;
}
.box2{
background: white;
display: block;
}
.box3{
background: white;
display:block;
}
.box4{
background: white;
display: block;
}
.subtitulo{
text-decoration: none;
}Em nenhuma dessas classes ou itens, consegui realizar a remoção do sublinhado com sucesso.
Alguém tem alguma luz?
Agradeço desde já.
`
