纯CSS绘制会话气泡

效果如下：

鼠标hover锁的时候出现气泡提示。

 html结构

<div class="lock">
      <i class="el-icon-lock" ></i>
 </div>
<div class="lockTips">修改URL可能会导致关键词排名的浮动，
流量的波动等问题，非必要<span>不建议修改</span>
</div>

css样式

// 锁
.lock {
  position: absolute;
  right: 6px;
  top: 2px;
  .el-icon-lock {
    font-size: 20px;
    color: #666;
  }
}
.lock:hover {
  cursor: pointer;
}
//hover的时候对兄弟节点操作
.lock:hover + .lockTips {
  display: block;
}
.lockTips {
  width: 524px;
  line-height: 40px;
  background: #e6f7ff;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #91d5ff;
  position: absolute;
  z-index: 1000;
  padding: 0px 16px;
  opacity: 1;
  right: 0;
  top: -47px;
  color:rgba(0, 0, 0, 0.85);
  span{
    color: rgba(252, 104, 50, 1);
  }

}
.lockTips::after {
  content: "";
  position: absolute;
  bottom: -5px;
  right: 9px;
  width: 0;
  height: 0;
  border-bottom: 10px solid #e9f7fe;
  border-right: 10px solid transparent;
  transform: rotate(-45deg);
  z-index: -1;
}
.lockTips::before {
  content: "";
  position: absolute;
  bottom: -6px;
  right: 9px;
  width: 0;
  height: 0;
  border-bottom: 10px solid rgba(145, 213, 255, 1);
  border-right: 10px solid transparent;
  transform: rotate(-45deg);
  z-index: -1;
}