CODEWITHSUNDEEP
htmlcss
Suraj
Suraj

Reputation: 2563

add a separator image after a paragraph ends

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.

Upvotes: 0

Views: 163

Answers (1)

Joris Ooms
Joris Ooms

Reputation: 12038

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/

Upvotes: 5

Related Questions