将内容定位在:伪元素之后绝对相对于内联元素的上边缘

Question

我正在寻找一种仅使用CSS的方法来将内容放在一个:after伪元素中绝对相对于另一个 - 可能是多行元素 - 的上边缘.结果应该类似于:

通常没有任何火箭科学可以实现这一目标,但我想找到一个符合以下标准的解决方案:

• 不要使用:before伪元素(这已经需要实现其他一些独立的东西),
• 不要display: block/inline-block;在内联元素上使用(因为它会在文本流中创建丑陋的洞),
• 允许将元素的宽度定义为包含元素的百分比(至少在应用三个规则之后),
• 不要:after以任何方式硬编码-pseudo-element 的顶部位置/边距/填充,使其依赖于父元素在祖父元素内的位置,父元素的高度或实际元素的高度(或使其变短:不要不做任何依赖于内容的东西,
• 不要插入其他HTML元素,和
• 不要添加JS.

我创建了一个Codepen,希望能够更容易地掌握我的目标.

我知道很容易通过违反上面列出的一个限制(如Codepen中所示)来获得结果,但我正在寻找一个优雅的解决方案来解决这个问题.

在玩了很长一段时间之后,我会说这是不可能的,但如果有人能说服我相反的事情,或者至少正式证明它实际上是不可能的,那就太好了.非常感谢您提前提供任何帮助.

Answer 1

好吧，唯一可能的解决方案是所需的方法。

-首先要提到的是，要使其工作，您需要::after content直接在 CSS 中定义，而不是通过data-属性。（我不知道为什么，但似乎是一个解析问题。）

-设置position:relative为.wrapper. 因为您将::after left-right根据该父级（而不是直接父级）移动。

-设置width: 100%为::after（父项的 100%）

-设置white-space: pre为::after-这很重要

-content直接使用（转义字符）编写\A以在特定位置中断单词。

-设置top: 0并给它一个负right位置（你想要多远）

注意：word-wrap: break-word如果附加文本溢出包装器，您可能需要设置某些元素。

基本上，这是对 CSS 的添加/修改：

.wrapper {
  position: relative;
}

.accent::before{
    position: absolute;
    width: 100%;
    content: "Unfortunately \A it is aligned with \A the last line of said span.";
    white-space: pre;
    right: -70%;
}

.content p {
    word-wrap: break-word; /* in my example <p> was problematic */
}

注意：我不知道这种方法对于响应式设计有多好，从未尝试过这种方式。

在 FF 和 Chrome 上测试。
实例

编辑：
嗯，是的，我开始::after然后不小心切换到::before=）

好吧，对 CSS 进行一些小修改：

-而不是width: 100%设置width: auto

-而不是top: 0你需要手动（抱歉）减少margin-top: -(number)px-不要使用 top，因为它会根据包装器本身设置顶部位置。

-切换right: -(number)%到right: -(number)px

CSS修改：

.accent::after{
    width: auto;
    right: -50px;
    margin-top: -40px;
    /* and remove "top" property completely */
}

实例

您可以使用的另一个编辑content: attr(data-meta)更清洁的工作解决方案（删除white-space: pre并设置width为所需的百分比大小：

.accent::after{
    position: absolute;
    width: 30%;
    content: attr(data-meta);
    right: -50px;
    margin-top: -40px;
}

实例