Como adicionar uma barra vertical no footer do meu site?

[Lucas Barreto]

Boa noite Galera

não estou conseguindo colocar essa barrinha vertical no meu footer. Alguem poderia me ajudar?

Desde já agradeço

[Tiago Neves]

Fala, @Lucas Barreto!

 

    border-left: solid 1px #aab1bf;
    height: 25px;
    margin: 0 10px;

faça uma div entre os elementos: <div class="divider"></div> e use esse css

[Lucas Barreto]

@Tiago Neves

ficou assim

 

[Lucas Barreto]

@Tiago Neves

Eu acho que está errado

[Tiago Neves]

Se você inspecionar o elemento no site do https://ge.globo.com/, você irá notar que eles colocam dentro de cada <li>

<li class="footer__service-list-item"><a href="//www.globo.com/privacidade.html">política de privacidade</a></li>

esse css:
 

.footer__service-list-item {
    border-left: 1px solid rgba(255, 255, 255, 0.3); <--- isso seria a barra que você quer
    padding: 0 5px 0 7px;
    font-family: var(--font-family-book), var(--font-family-book-fallback);
    font-size: var(--font-size-20-responsive-book);
    letter-spacing: var(--font-size-20-responsive-book-letter-spacing);
}

 

[Lucas Barreto]

@Tiago Neves obrigado

[Lucas Barreto]

@Tiago Neves

Ficou assim no ultimo link teve o risco á direita

[Lucas Barreto]

@Tiago Neves, consegui arrumar obrigado

[Lucas Barreto]

@Tiago Neves

não estou entedendo

o porque que a margin aparece depois do link de contato

[Tiago Neves]

.footer__service-list-item:first-child {
    border-left: 0;
    padding-left: 0;
}

.footer__service-list-item:last-child {
    padding-right: 0;
}

• .footer__service-list-item:first-child:
  • Seleciona o primeiro item da lista (:first-child) que está dentro de um contêiner com a classe footer__service-list-item.
  • border-left: 0;:
    • Remove qualquer borda do lado esquerdo do primeiro item da lista.
  • padding-left: 0;:
    • Remove qualquer preenchimento (espaço interno) do lado esquerdo do primeiro item da lista.
• .footer__service-list-item:last-child:
  • Seleciona o último item da lista (:last-child) que está dentro de um contêiner com a classe footer__service-list-item.
  • padding-right: 0;:
    • Remove qualquer preenchimento (espaço interno) do lado direito do último item da lista.

Essas regras são frequentemente usadas para estilizar listas de itens em um rodapé ou em um menu. A remoção da borda e do preenchimento no primeiro e no último item da lista ajuda a alinhar os itens corretamente e pode evitar a criação de espaços indesejados nas extremidades da lista.

Por exemplo, imagine uma lista horizontal de links de serviço no rodapé de um site. Ao remover a borda e o preenchimento nos itens das extremidades, você pode criar uma aparência mais limpa e organizada:

 

<ul class="footer__service-list">
    <li class="footer__service-list-item">Item 1</li>
    <li class="footer__service-list-item">Item 2</li>
    <li class="footer__service-list-item">Item 3</li>
</ul>

Aqui, o primeiro item (Item 1) terá a borda e o preenchimento à esquerda removidos, enquanto o último item (Item 3) terá o preenchimento à direita removido, criando uma lista visualmente agradável e bem alinhada.

[Lucas Barreto]

@Tiago Neves Obrigado