Publicado em 27 de nov.

Como utilizar :after e :before?

Estou com dificuldades em fazer esses cantinhos vermelhos, sei que é feito com :after e :before, mas não estou conseguindo fazer como está na imagem, alguém pode me ajudar?

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

wanderval· 1 de dez.

Olá meu caro, segue um exemplo para essa implementação

HTML:

<div class='category'>PORTIFOLIO</div>

	CSS:

.category {
 background: #eee;
 width: 200px;
 height : 50px;
 position: relative;
 display:flex;
 align-items: center;
 justify-content: center;
 font-family: arial;
}

div.category:before {

 content: "";
 position: absolute;
 left: 0;
 bottom: 0;
 height: 30px;
 width: 30px;
 border-bottom: 2px solid black;
 border-left: 2px solid black;
}

div.category:after {

 content: "";
 position: absolute;
 right: 0;
 top: 0;
 height: 30px;
 width: 30px;
 border-top: 2px solid black;
 border-right: 2px solid black;
}

	Link exemplo: [https://jsbin.com/pegaludise/edit?html,css,output](https://jsbin.com/pegaludise/edit?html,css,output)