add a separator image after a paragraph ends - html

Question

I want to add a separator image as a border.
Here's the html
<div class="content-wrapper">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>TRACK MY ORDER</h1>
<p>Fill your order number below to track your order</p>
</div>
<div class="col-xs-12">
<form action="">
<div class="order-input">
<input type="text" class="text" placeholder = "Order Number">
<input type="submit" class="submit">
</div>
</form>
</div>
<div class = "col-xs-12 order-info">
<p>Dear Customer, <br><br>
Your Order number 19175 has<br>
been successfully shipped and here are the tracking details:
</p>
</div>
</div>
</div>
</div>
Here's the Css I am trying to have that border.
.order-info p :after {
content: '';
position: absolute;
width: 100%;
height: 50px;
display: inline-block;
background-position: center;
background-repeat: no-repeat;
background-image: url(../assets/gt.png);
top: 0;
}
This I think should work but strangely not working.
Here's this fiddle.

Answer 1

Couple of things to get this to work:
.order-info p:after, no space between p and the :after pseudoelement.
You don't need the :after element to be position: absolute. Just put it static and the way :after works will do the rest:
.order-info p:after {
content: '';
width: 100%;
height: 50px;
display: inline-block;
background-position: center;
background-repeat: no-repeat;
background-image: url(http://i.imgur.com/pcpKrPe.png)!important;
}
Updated fiddle: https://jsfiddle.net/z7p5fzzz/3/