在内联跨度的边缘定位绝对div

Question

我正在构建使用“句柄”选择文本的功能。这些手柄需要位于内联跨度的左侧或右侧。图片：

正如你所看到的，我在CSS中使用这个样式已经有了很长的路要走。我遇到的一个问题是，我似乎无法在文本本身上找到正确的句柄。

正在使用以下代码：

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

这个JSFiddle很好地展示了我的问题： JSFiddle

Answer 1

我可能会将元素转换为内联并在开头创建一个，然后在结尾创建另一个元素然后我将使用伪元素。这样做我将确保他们将在正确的位置：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;