CSS {veja mais}

1. Como utilizar

<div class="vejamais" aria-label="Veja
mais">
<h5>Veja mais:</h5>
<ul>
<li><a href="LINK1"rel="noopener" target="_blank">TEXTO1</a></li>
<li><a href="LINK2"rel="noopener" target="_blank">TEXTO2</a></li>
<li><a href="LINK3"rel="noopener" target="_blank">TEXTO3</a></li>
</ul>
</div>

2. Resultado

Veja mais:

• TEXTO1
• TEXTO2
• TEXTO3

3. CSS implementado no blog

/* CSS PARA RODAPÉ {VEJA MAIS} - INICIO */
.vejamais {
    background-color: #fcfcfc; /* Cor de fundo suave */
    border-left: 5px solid #004F98; /* Borda lateral azul */
    padding: 15px; /* Espaçamento interno */
    margin: 20px 0; /* Margem externa para separar dos outros elementos */
    border-radius: 5px; /* Cantos arredondados */
    font-family: Merriweather, serif; /* Fonte serifada */
    font-weight: 300; /* Peso da fonte */
    font-size: 13px; /* Tamanho do texto */
    text-align: left; /* Alinhamento do texto */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}
.vejamais h5 {
    color: #000; /* Cor do título */
    margin-top: 0; /* Remover margem superior padrão */
    font-size: 18px; /* Tamanho do título */
    font-weight: 700;
    margin: 0 0 20px; 
    padding: 0; 
    border-bottom: 0; 
}
.vejamais ul {
    padding-left: 20px; /* Alinhar itens da lista */
    margin-bottom: 0; /* Remover margem inferior padrão */
    list-style-type: disc; /* Bolinhas pretas */
}
.vejamais li {
    margin-bottom: 8px; /* Mais espaçamento entre itens */
    padding-top: 0;
    padding-bottom: 0;
    color: #004F98; /* Cor do texto das referências */
}
.vejamais li::marker {
    color: #000; /* Cor das bolinhas (preta) */
}
.vejamais a {
    color: #004F98; /* Cor dos links (azul) */
    text-decoration: none; /* Remover sublinhado */
}
.vejamais a:hover {
    text-decoration: underline; /* Sublinhar ao passar o mouse */
}
/* CSS PARA RODAPÉ {VEJA MAIS} - FIM */