关于在段落前后添加水平线的问题

Question

请告诉我如何升级以下代码以使结果看起来像

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

现在我得到了这个

Answer 1

将display更改为inline-block，我还将保证金更改为em值，以便根据字体大小进行缩放

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>