- Produz uma caixa cinza, com uma barra vertical amarela na lateral esquerda e aspas no cato superior direito.
- Necessário instalação da fonte awesome dentro do <head>:
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css' rel='stylesheet'/>
1. Como utilizar
Inserir dentro das tags <blockquote> texto </blockquote>:
<blockquote>
Produz uma caixa cinza, com uma barra vertical amarela na lateral esquerda e aspas no cato superior direito
</blockquote>
2. Resultado
Produz uma caixa cinza, com uma barra vertical amarela na lateral esquerda e aspas no cato superior direito.
3. CSS implementado no blog
blockquote {
font-size: 15px;
font-style: italic;
font-family: "Merriweather", serif;
margin: 20px 0;
padding: 20px 45px 20px 20px; /* Padding à esquerda para 20px */
border-left: 5px solid #f1c232; /* Borda esquerda */
background-color: #f9f9f9;
line-height: 1.6;
position: relative;
color: #444;
text-align: left;
}
blockquote::before {
display: none; /* Remoção a aspa de abertura */
}
blockquote::after {
content: "\f10e"; /* Código do ícone de fechamento das aspas */
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 20px;
font-style: normal;
color: #f1c232;
position: absolute;
top: 5px; /* Posicioado no topo */
right: 10px; /* Posicionado no lado direito */
}