alguém sabe como fazer esta linha tracejada apenas com css? já tentei com imagens porém não consegui obrigado!
2 Respostas
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>
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>
border-style:dashed
, mas não vai ficar como na imagem. developer.mozilla.org/pt-BR/docs/Web/CSS/border-styleborder-style
.