css - ::after 元素相交的细线

Question

我的代码如下所示：

.bubble {
  background-color: white;
  border-radius: 12px;
  border: 1.3px solid black;
  width: 90%;
  max-width: 800px;
  padding: 8px 12px;
  position: relative;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  text-align: justify;
  word-break: break-word;
  hyphens: auto;
}

.tail {
  position: absolute;
  overflow: hidden;
  top: 12px;
  left: -10px;
  height: 12px;
  width: 10px;
}

.tail::after {
  background: #ffffff;
  border: 1.3px solid black;
  content: '';
  height: 100%;
  position: absolute;
  right: -6px;
  top: -9px;
  transform-origin: 0 100%;
  transform: rotate(47deg);
  width: 100%;
}

<div class='bubble'>
  <div class='tail'></div>
  Hi!
</div>
<style>

但是，在 MacOS Chrome 上，有一条细线代替了根本不应该有任何线条的边框。为什么会发生这种情况，我该如何删除它？谢谢！！

标签： css