Issue on Adding Horizontal Line Before and After Paragraph

Question

Can you please let me knoe how I can upgrade the following code to make the result looks like

p::before {
   content: "";
    display: block;
    height: 1px;
    width: 20%;
    margin: 10px;
    background: #f00;
}
p::after {
   content: "";
    display: block;
    height: 1px;
    width: 20%;
    margin: 10px;
    background: #f00;
}

<div class="col-md-12"><p>paragraph text</p></div>

Right now I am getting this

Probably change the `display` to `inline-block` – Sam Dec 15 '15 at 07:54 — Sam, Dec 15 '15 at 07:54

score 1 · Accepted Answer · answered Dec 15 '15 at 07:58

Changed display to inline-block and I also changed margin to a em value so it will scale according to font-size

p::before {
   content: "";
    display: inline-block;
    height: 1px;
    width: 20%;
    margin: 0.3em;
    background: #f00;
}
p::after {
   content: "";
    display: inline-block;
    height: 1px;
    width: 20%;
    margin: 0.3em;
    background: #f00;
}

<div class="col-md-12"><p>paragraph text</p></div>

Issue on Adding Horizontal Line Before and After Paragraph

1 Answers1