Adding jquery image before pre tag-CodePudding

I have a pre tag

<pre>This is the Pre Tag Example </pre>

I would like to add an before pre tag using jquery or css , currently the code i written its append with pre tag .

Current Code:

pre:after {
    content: '\f0c5';
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    margin-left:5px;
    color:black;
}

Its showing like pre:after but thats not expected ..

Expected Result

<img id="theImg" >
<pre>This is the Pre Tag Example </pre>

CodePudding user response：

You can use jQuery's .before() or .insertBefore() to add elements before others.

For example

$("<i>", {
  id: "theImg",
  class: "fa fa-files-o",
}).insertBefore("pre:first");

// This is just to show you the resulting markup
console.log("result:", $("div").html().trim());

/* Fake FontAwesome */
.fa.fa-files-o::before { content: "