Positioning a absolute div at the edges of an inline span

Question

I am building functionality to select text with "handles". These handles need to be positioned on either the left or right side of the inline span. An image:

As you can see I've come a long way in styling this in CSS. The one problem I have is that I can't seem to position the right handle on the text itself.

The following code is being used:

.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>

This JSFiddle displays my problem well: JSFiddle

Answer 1

I would probably transform the element to inline and make one at the beginning and the other one at the end then I will use pseudo element. Doing this I will be sure they will be in the right place:

.all-text {
  width: 400px;
  margin: 40px;
}

.text {
  display: inline;
  background-color: #4d82f2;
  color: white;
  padding: 1px;
  border-radius: 2px;
  margin: 0;
  position: relative;
}

.text>.handle-left,
.text>.handle-right {
  position: relative;
}

.text>.handle-left:before {
  content: "+";
  position: absolute;
  background-color: #757575;
  height: 25px;
  width: 30px;
  left: -30px;
  top: -25px;
  display: inline-flex;
  justify-content: center;
  font-size: 24px;
  border-radius: 15px;
  border-bottom-right-radius: 4px;
}

.text>.handle-right:before {
  content: "+";
  position: absolute;
  background-color: #757575;
  height: 25px;
  width: 30px;
  right: -30px;
  bottom: 18px;
  display: inline-flex;
  justify-content: center;
  font-size: 24px;
  border-radius: 15px;
  border-bottom-left-radius: 4px;
}

<div class="all-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum corporis enim doloremque perspiciatis, doloribus nemo commodi, consectetur
  <div class="text">
    <span class="handle-left"></span>
    <span> quaerat verit</span>
    <span class="handle-right"></span>
  </div>
  autem laboriosam est alias aspernatur deserunt quae, fugit eos? Lorem ipsum dolor sit amet,

  <div class="text">
    <span class="handle-left"></span>
    <span> quaerat verit consectetur adipisicing elit. Laborum corporis enim </span>
    <span class="handle-right"></span>
  </div>

  consectetur adipisicing elit. Laborum corporis enim doloremque perspiciatis, doloribus nemo commodi, consectetur
  <div class="text">
    <span class="handle-left"></span>
    <span> quaerat veritatis at unde</span>
    <span class="handle-right"></span>
  </div>
  autem laboriosam est alias aspernatur deserunt quae, fugit eos?</div>