Solucionado
como colocar tipo um hr do lado do texto e que fique do tamanho do texto
site de exp https://g1.globo.com/
no menu tem as seguintes frases globo.com , g1 , globoesporte , gshows , e vídeos e entre esses texto tem essas linhas que se adaptam com texto
consegui colocar essas linhas ao lado do texto, mas não consegui fazer que fiquem do tamanho do texto
Boa tarde! Como vai?
Uma forma de verificar como o pessoal da Globo fez isso é utilizando o developer tools!
No Google Chrome, clique com o botão direito do mouse sobre a linha cinza e selecione a opção "inspecionar". Vc verá que se abrirá um painel ( que é chamado de developer tools ) com o seguinte elemento HTML:
<div class="v-separator"></div>É essa div que faz o papel do separador vertical! Além do HTML, no developer tools vc também poderá ver o CSS aplicado no elemento HTML selecionado, no caso, justamente essa div! E com isso vai perceber que a altura dela é sempre de 10px e não igual à altura do texto.
Pegou a ideia? Qualquer coisa é só falar!
Grande abraço e bons estudos!
Olá, amigo. O link que você deixou, eu acessei o site e utilizando o que o moderador Gabriel Leite recomendou (Dev Tools), pude ver como foi feito, tirei um Print da tela para você ver.
Foi utilizado pseudo elements, no caso o ::after.
Eu copiei o trecho de código da página para te mostrar, espero de ajudado.
.bstn-fd .bstn-item-shape:after {
background-color: #c8c8c8;
content: "";
display: block;
height: 1px;
margin-top: 32px;
}obrigado professor e Douglas, resolveram meu problema
uma outra duvida, quando eu coloco o
<div class="v-separator"></div>eu tenho que ficar configurando cada um deles ? exemplo:
<div class="v-separator2"></div>
<a id="color-item" class="nav-item nav-link" href="#">Peça E Serviços</a>
<div class="v-separator"></div>
<a id="color-item" class="nav-item nav-link" href="#">Sobre Nós</a>eu coloquei a div antes mais ele não esta aparecendo antes da frase ela está la em cima no começo da pagina. eu tenho que ficar configurando cada uma delas com os margin?
CSS configuração que eu usei para aparecer antes do texto, estar certo isso?
@media (min-width: 768px) {
.v-separator {
position: absolute;
top: 60px;
left: 898px;
width: 1px;
height: 10px;
background: white;
}
.v-separator2 {
position: absolute;
top: 60px;
left: 757px;
width: 1px;
height: 10px;
background: white;
}
}