How to style the <p> tag differently?

Asked

Viewed 243 times

4

But I can’t style it to look like the image below. How do I do it? It will be another tag?

inserir a descrição da imagem aqui

I tried so: 

   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>

css html5 css3

2 answers

5


You have to have 2 elements. One that creates the box and one that creates the horizontal line.

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>

3

Follows a alternative styling only the element p, but without a doubt the solution with 2 elements, presented by @Sergio, is better, for compatibility reasons, responsiveness 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>

Browser other questions tagged css html5 css3

You are not signed in. Login or sign up in order to post.