Currently, I am faced with the challenge of inserting a span into a contenteditable element to act as a tag or separator. Here is my code snippet:
.tag {
display:block;
background-color:red;
}
.edit-box{
border: 1px solid black;
padding: 10px;
}<div id="test" contenteditable="true" class="edit-box">
<span class="tag" contenteditable="false>NON EDITABLE</span>How do I style the span element so that the cursor can be placed at the beginning?
</div>My goal is to be able to modify text both before and after the span element, but currently, it's challenging to position the cursor right before the element. Any suggestions on how to style the span element for improved cursor flexibility?