In my project, I am working on adding a feature where text can be selected with the help of "handles." These handles have to be positioned either on the left or right side of the inline span. For reference, here is an image:
https://i.sstatic.net/U1XGe.jpg
Although I've made progress in styling this using CSS, I'm facing one issue – I am unable to position the right handle correctly on the text itself.
Below is the code snippet that I am currently utilizing:
.text {
display: inline;
background-color: #4d82f2;
color: white;
padding: 1px;
border-radius: 2px;
margin: 0;
position: relative;
}
.text>.handle-left {
position: absolute;
background-color: #757575;
height: 25px;
width: 30px;
left: -30px;
top: -25px;
font-size: 10px;
border-radius: 15px;
border-bottom-right-radius: 4px;
}
.text>.handle-right {
position: absolute;
background-color: #757575;
height: 25px;
width: 30px;
right: -30px;
top: -25px;
font-size: 10px;
border-radius: 15px;
border-bottom-left-radius: 4px;
}<div>All the other text
<div class="text">
<span>blue text</span>
<div class="handle-left">plus icon</div>
<div class="handle-right">plus icon</div>
</div>
Maybe some more text, who knows?
</div>The issue is well-represented in this JSFiddle: JSFiddle