如何将伪元素前后定位到其父元素的中右和中左？

Question

我一直在使用 SCSS 为 Vue 制作一个可自定义的工具提示，允许开发人员指定工具提示的颜色和位置，它由一对 ::before 和 :: 构成在可变大小的按钮元素中的伪元素之后。 ::before 充当工具提示的箭头，::after 充当工具提示内容。

我想实现四个位置：顶部、底部、左侧和右侧。以下两组类适用于顶位和底位：

    .tooltip-placement-top, .triangle-placement-top {
      left: 50%;
      transform: translate(-50%, 0);
    }

    .tooltip-placement-top {
      bottom: calc(100% + 10px);  // 3. 100% here is parent height, key point
    }

    .triangle-placement-top {
      bottom: calc(100%); // 4. no need add 5px, because transparent border also takes place
      border-top-color: var(--tooltip-border-color);
    }

    .tooltip-placement-bottom, .triangle-placement-bottom {
      left: 50%;
      transform: translate(-50%, 0);
    }

    .tooltip-placement-bottom {
      top: calc(100% + 10px);  // 3. 100% here is parent height, key point
    }

    .triangle-placement-bottom {
      top: calc(100%);
      border-bottom-color: var(--tooltip-border-color);
    }

这些会导致按钮上方和下方居中的工具提示，如下所示：下一阶段是将左右手工具提示类定位为与按钮的水平中心对齐，但符合按钮的左边缘或右边缘而不是顶部和底部，如下所示：

按钮和工具提示都可能显示为不同的大小，具体取决于它们的使用上下文，因此不幸的是，这需要一个可扩展的解决方案（即增加按钮或工具提示的大小不会导致它们下降不对齐）。我目前尝试调整代码，使工具提示显示在按钮右侧 100% 的宽度，您可以想象这看起来很糟糕。

抱歉，我没有屏幕截图可以分享，但我希望这些图能清楚地说明我想要实现的目标！如果您需要任何额外的代码，那么我可以提供它，但是问题变得非常庞大。

Answer 1

已排序！

这是我的左右手类:

.tooltip-placement-left, .triangle-placement-left {
    top: 50%;
}
.tooltip-placement-left {
    right: 100%;
    transform-origin: right;
    transform: translate(-12px, -50%);
}
.triangle-placement-left {
    right: 100%;
    transform: translate(8.3px, -50%);
}
.tooltip-placement-right, .triangle-placement-right {
    top: 50%;
}
.tooltip-placement-right {
    left: 100%;
    transform-origin: left;
    transform: translate(12px, -50%);
}
.triangle-placement-right {
    left: 100%;
    transform: translate(-8.3px, -50%);
}

以像素为单位的确切距离取决于工具提示箭头的尺寸，但这对我有用。希望它能帮助别人！

如何将伪元素前后定位到其父元素的中右和中左？

How to position before and after pseudo elements to center-right and center-left of their parent?

css

sass

absolute