2

alguém sabe como fazer esta linha tracejada apenas com css? já tentei com imagens porém não consegui obrigado!
inserir a descrição da imagem aqui

3
  • Tracejada como? Pela imagem não dá pra entender.
    – bfavaretto
    Commented 14/01/2018 às 1:30
  • Você pode usar border-style:dashed, mas não vai ficar como na imagem. developer.mozilla.org/pt-BR/docs/Web/CSS/border-style Commented 14/01/2018 às 1:37
  • por que só pode ser com css? Usando duas tags span da para reproduzir tranquilamente com border-style.
    – Juven_v
    Commented 14/01/2018 às 1:57

2 Respostas 2

3

Se quer o traço da forma colocada na imagem da pergunta, você pode criar uma classe com os pseudo-elementos ::before e ::after:

/* tirei o underline do "a" apenas para exemplificar no resultado*/
a{
   text-decoration: none;
}

.trasso{
   position: relative;
}

.trasso::before,
.trasso::after{
   content: '';
   border-bottom: 2px solid #090;
   position: absolute;
   top: 100%;
}

.trasso::before{
   width: 5px;
   left: 0;
}

.trasso::after{
   width: 30px;
   left: 10px;
}
<div>
   <p class="trasso">Conheça o projeto</p>
   <a href="#" class="trasso">Conheça o projeto</a>
</div>

3

Da para fazer com linear-gradient

.linha {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #48958C;
    font-size: 2.5rem;
    position: relative;
}
.linha::after {
   content: '';
   position: absolute;
   width: 6rem;
   height: 0.2rem;
   top: 100%;
   left: 0.25rem;
   background: linear-gradient(to right,#48958C 0%, #48958C 15%, transparent 15%, transparent 30%, #48958C 30%)
}
<p class="linha">Conheça o projeto</p>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .