Add image before text-CodePudding

I want to add an image before the text using jQuery. Below is the HTML in the DOM. I don't want to add any styles using class name as it used in other pages, it would also get effected

Is there any possibility to insert the image using the Text value(picture1 sample text) which does not change

Eg: |image| picture1 sample text

<div class="a">
    ::before
    "picture1 sample text"
    ::after
</div>

CodePudding user response：

To insert an image before some text, you can simply insert an image HTML element inside a container, make that container a flexbox and define the alignment as needed. You can read more on flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

div {
display:flex;
width:80vw;margin-left:10vw;
flex-direction:row-reverse;
justify-content:space-evenly;
}

span, img {
margin:10px;
}

img  {
width:150px;
height:150px;
}

<div id="div1">
    <span>Some text</span>
    <img src="https://www.amazon.ca/images/I/617HkS2u3sL._AC_SS130_.jpg">
</div>