How to stylize the p tag differently?

Question

How to stylize the p tag differently?

Navigation

#1 by (5 votes)
#2 by (3 votes)

4

But I can not stylize it to look like the image below. How do I do it? Will it be another tag ?

Itriedthisway:

   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>

html5 css css3

asked by anonymous 20.06.2017 / 16:15

2 answers

3

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

20.06.2017 / 16:34

Select option from a select OFFSET next to COUNT (*) returns nothing?

score 5 · Accepted Answer

You must have 2 items. One that creates the box and another 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>