css - 将 css 选择器放在悬停元素位置之前的弹出模式上

Question

我试图在框悬停时将::before::after css 选择器定位到弹出模式

可重现的堆栈 Blitz

https://stackblitz.com/edit/angular-o389e8?file=src/app/app.component.scss

css 选择器应放置在弹出模式之前或之后，并放置在悬停框的垂直中心。 所以箭头应该附加到弹出模式，类似于我们的工具提示

modal per say 的定位已经符合预期，只需要更正::before::after 箭头定位。

仅供引用

Answer 1

除了使用 :before，您还可以使用 clip-path 创建箭头

.arrow {
  height: 20px;
  width: 20px;
  clip-path: polygon(0 50%, 100% 100%, 100% 0);
  background: red;
}

<div class="arrow"></div>

现在，您可以使用 ElementRef获取 fs-modal 元素并更改 .arrow 类的顶部值

Updated StackBlitz Demo