CSS to add a footer to ecommerce receipts

Let’s say you sell courses using the Docebo eCommerce module and want to improve the receipt.  The stock receipt that’s shown to the purchaser, one-time, doesn’t provide a lot of information other than your company logo and the actual transaction information.  If you want to add a header and footer, here’s a way using nothing more than CSS:

//Example 1 (header)
[id="receipt-wrapper"]:before {
  content:'Header info here'; 
  visibility: visible;
  display: block;
  padding: 5px;
  top: 2px;
  font-size: small;
}

//Example 2 (footer)
[id="receipt-wrapper"]:after {
  content:'Classes subject to minimum enrollment and payment acceptance'; 
  visibility: visible;
  display: block;
  padding: 5px;
  top: 2px;
  font-size: small;
}

Result:

By the way, the receipt is available anytime to SuperAdmins and the individual user (but not Power Users) using this link structure:  

https://YOURSITEADDRESS/ecommerce/cart/receipt/TRANSACTION_ID

You may find it helpful to use automation to write this link into a User Additional Field for later reference by the customer.