4

Mas não consigo estilizá-lo para ficar com a aparência da imagem abaixo.Como faço? Será outra tag?

inserir a descrição da imagem aqui

Tentei assim:

   p.acessorapido{
      float: left;
      width: 100%;
      height: 38px;
      max-width: 885px;
      margin-top: 20px;
      padding: 15px;
      font-size: 20px;
      box-sizing: border-box;
      color: #C11C05;
      border-bottom: 1px #C11C05 solid;
    }
<p class='acessorapido'></p>

2 Respostas 2

5

Tens de ter 2 elementos. Um que crie a caixa e outro que crie a linha horizontal.

p.acessorapido {
  float: left;
  width: 100%;
  height: 38px;
  max-width: 885px;
  margin-top: 20px;
  padding: 15px;
  font-size: 20px;
  box-sizing: border-box;
  color: #eee;
  border-bottom: 1px #C11C05 solid;
}

p.acessorapido span {
  background-color: #C11C05;
  padding: 0 10px;
}
<p class="acessorapido"><span>Politica</span></p>

0
3

Segue uma alternativa estilizando somente o elemento p, mas sem sombra de dúvidas a solução com 2 elementos, apresentada pelo @Sergio, é melhor, por questões de compatibilidade, responsividade etc...

p.acessorapido {
  float: left;
  width: 100%;
  height: 38px;
  max-width: 885px;
  margin-top: 20px;
  padding: 15px;
  font-size: 20px;
  box-sizing: border-box;
  color: #C11C05;
  border-bottom: 1px #C11C05 solid;
  background: -webkit-linear-gradient(left, #C11C05 16%, white 16%);
  background: -moz-linear-gradient(left, #C11C05 16%, white 16%);
  background: -ms-linear-gradient(left, #C11C05 16%, white 16%);
  background: linear-gradient(left, #C11C05 16%, white 16%);
  color: white;
}
<p class="acessorapido">Política</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 .