如何响应式地将 after 伪元素置于其父元素之上？

Question

我正在尝试制作一个响应式工具提示并且没有硬编码宽度或父项上的任何内容。

这看起来很简单，但我无法将 after 元素正确居中，因为它上面已经有一个 transform: translateY(10px) 属性。

我无法执行正常的 left:50%; top:50%; transform: translate(-50%, -50%)' 我在网上看到的，因为我已经有一个转换属性。

这是问题所在吗？或者我应该找另一个地方吗？

如果有人有任何提示或指示，请告诉我！

另外，希望在vue中没问题；无论如何，一切都应该在样式部分处理。

干杯！

CodeSandbox Example

Tooltip.vue

<script lang="ts">
import { defineComponent, computed } from 'vue'

export default defineComponent({
  props: {
    text: { type: String, default: 'Pop!' },
    backgroundColor: { type: String, default: '#000' },
    textColor: { type: String, default: '#fff' },
  },
  setup(props) {
    const text = computed(() => props.text)
    return { text }
  },
})
</script>
<template>
  <span :data-tooltip="text">
    <slot />
  </span>
</template>

<style lang="sass">
[data-tooltip]
  position: relative
  cursor: default
  &:after
    position: absolute
    width: max-content
    // left: calc(50% )
    bottom: 125%
    text-align: center
    box-sizing: border-box
    display: flex
    justify-content: center

    content: attr(data-tooltip)
    color: v-bind(textColor)
    background: v-bind(backgroundColor)
    padding: 8px
    border-radius: 1em
    font-weight: bold
    white-space: nowrap

    visibility: hidden
    opacity: 0
    transform: translateY(10px)
    transition: all 400ms
    // transition: opacity 500ms, transform 500ms
  &:hover::after
    opacity: 1
    visibility: visible
    transform: translateY(0)
</style>

Answer 1

:after 伪元素自然是 left-aligned 与它的父元素，并且由于它的宽度比 <span> 父元素宽，它看起来偏离中心。

一个快速的解决方法是使 :after 伪元素和 <span> 具有相同的宽度，以便它们完全对齐：

<style lang="sass">
[data-tooltip]
  &:hover::after
    width: 100%
</style>

demo

如何响应式地将 after 伪元素置于其父元素之上？

How to center an after pseudo-element above it's parent responsively?

css

vue.js

sass

pseudo-element