在内容可编辑的图像之前/之后放置插入号

Question

I have a contenteditable div for a chat. I added a function for adding emoji to the text. When I'm clicking on the emoji in the contenteditable, I want that the caret is placed before or after the image.

 .chat-text-box img { width: 100%; height: 100%; } .chat-text-box emoji { width: 18px; height: 18px; display: inline-block; } 

 <div class="chat-text-box" contenteditable="true">This is a emoji:&nbsp; <emoji class="emoji-icon" contenteditable="false" data-emoji="&amp;#x1F605;"><img draggable="false" src="https://twemoji.maxcdn.com/2/svg/1f605.svg"></emoji> </div> 

Answer 1

You can create that caret with a pseudo-element ::after when the text-box has :focus

More about pseudo-elements MDN

 .chat-text-box img { width: 100%; height: 100%; } .chat-text-box emoji { width: 18px; height: 18px; display: inline-block; /* added this so you can use position: absolute on the ::after */ position: relative; } .chat-text-box:focus emoji::after { content: '>'; display: block; width: 1rem; height: 1rem; position: absolute; bottom: 0; right: -1.5rem; } 

 <div class="chat-text-box" contenteditable="true">This is a emoji:&nbsp; <emoji class="emoji-icon" contenteditable="false" data-emoji="&amp;#x1F605;"><img draggable="false" src="https://twemoji.maxcdn.com/2/svg/1f605.svg"></emoji> </div>