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

我正在寻找一种CSS唯一的方法来定位

中的内容：在
伪元素之后绝对相对于另一个（可能是多行）元素的顶部边缘。结果应该与此类似：


通常不涉及火箭科学，但我想找到一个同时满足以下标准的解决方案：


不要使用
：before
伪元素（这是实现其他独立功能所必需的）
不要使用
显示：块/内联块（因为它会在文本流中创建丑陋的孔）

允许将元素宽度定义为包含元素的百分比（至少在应用三个规则之后）
不要硬编码
：伪元素之后的顶部位置/边距/填充，以任何方式使其依赖于父元素在祖辈元素中的位置、父元素的高度或实际元素的高度（或使其简短：不要使任何内容依赖于内容）

不要插入其他HTML元素，并且
不要添加JS

我创造了一个新的平台，希望它能让我更容易理解我在这里要做什么

我知道，通过违反上面列出的限制之一（如代码笔中所示），很容易得到结果，但我正在寻找一个优雅的解决方案来解决这个不需要的问题

在玩了很长一段时间之后，我会说这是不可能的，但是如果有人能说服我相反的观点，或者至少正式证明这实际上是不可能的，那就太好了。非常感谢您事先提供的任何帮助。
好吧，使用想要的方法唯一可能的解决方案就是这个


-首先要提到的是，要使其起作用，您需要直接在CSS中定义
：：在
内容之后，而不是通过
数据-
属性。（我不知道为什么，但似乎是解析问题。）


-设置
位置：相对于
.wrapper
。当您要移动时：：基于该父项（而非直接父项）在
之后从左到右
。


-将
宽度：100%
设置为
：：在
之后（100%的父项）


-将
空白：前
设置为
：：后
-这很重要


-使用
\A
（转义字符）在特定位置打断单词，直接编写
内容。


-设置
顶部：0
并给它一个负的
右侧
位置（你想要多远）


注意：如果附加文本溢出包装器，您可能需要在某些元素集上设置
换行：断开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 */
}


另一次编辑

清洁工作解决方案，您可以在其中使用
内容：attr（数据元）
（已删除
空白：pre
，并将
宽度设置为所需的百分比大小：

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

根据这些要求，我尝试了：


在
元素之后的
：：处使用bottom属性，或

使用translateY属性

例如：


1-不幸的是，它不适用于多行内容
Pellentsque ultrices sed quam Pellentsque，eu ultrices nulla semper。
leo ligula，laoreet eget urna et，Vignessim facilisis nisi ante.Duis Gradida lectus tellus，sed rutrum nisi Ultrices a.Aliquam pellentesque ante.在同侧颈静脉

2-不幸的是，它不适用于多行内容
Pelletsque ultrices sed quam Pelletsque，eu ultrices null a semper.Etiam leo ligula，laoreet eget urna et，Vignessim facilisis nisi ante.Duis predia lectus tellus，sed rutrum nisi ultrices a.ipsum convallis porta的Pelletsque ante

标签
{
颜色：红色！重要；
}
/*基本打字错误（与问题无关）*/
身体{
字体系列：佐治亚，衬线；
字体大小：82.5%；
线高：1.167；
颜色：#555；
}
h1，h2{
颜色：#222；
}
h1{
字体大小：1.167em；
}
氢{
字号：1em；
}
/*问题相关风格*/
.包装纸{
位置：相对位置；
宽度：580px；
利润率：2米自动；
}
.内容p{
宽度：62.069%；
}
.口音{
颜色：矢车菊蓝；
&：之后{
内容：attr（元数据）；
位置：绝对位置；
右：0；
宽度：31.035%；
转换：translateY（-50%）
}
}
.重音底部{
颜色：矢车菊蓝；
&：之后{
内容：attr（元数据）；
位置：绝对位置；
右：0；
宽度：31.035%；
底部：14%；
}
}
是不是也需要位置敏感的东西：在
之前？否则你可以使用它。
：
之后的宽度应该是相对于
的，但是它的
顶部
应该是相对于
的，对吗？我相信这是最难的部分…谢谢你的评论。@Terry:这个问题的想法是为了找到一个不使用
的解决方案：在
之前，例如，如果这已经用于其他东西。@Luizgrs：是的，我认为这是问题的本质。我感兴趣的是，是否有某种黑客或解决方法与两个元素相关，一个用于宽度，另一个用于水平放置。为什么它必须是
：：在
伪元素之后？这难道不是一个真正的元素吗？你强加的要求用纯CSST是不可能满足的。这不符合要求，因为你使用了
：before
伪元素，而你的解决方案在使用
：：after
时不再有效：。无论如何，非常感谢你尝试一下。你的两个新建议
.accent::after{
    position: absolute;
    width: 30%;
    content: attr(data-meta);
    right: -50px;
    margin-top: -40px;
}

<div class="wrapper">
    <div class="content">
         <h2>1-Unfortunately it doesn't work with multline content</h2>

        <p>Pellentesque ultrices sed quam pellentesque, eu ultricies nulla semper.
            <label for="pretty" class="accent" data-meta="Unfortunately it is aligned with the last line of said span.">Etiam leo ligula, laoreet eget urna et, dignissim facilisis nisi ante.</label>Duis gravida lectus tellus, sed rutrum nisi ultricies a. Aliquam pellentesque ante at ipsum convallis porta.</p>
         <h2>2-Unfortunately it doesn't work with multline content</h2>

        <p>Pellentesque ultrices sed quam pellentesque, eu ultricies nulla semper. <span class="accent-bottom" data-meta="Unfortunately it is aligned with the last line of said span.">Etiam leo ligula, laoreet eget urna et, dignissim facilisis nisi ante.</span> Duis gravida lectus tellus, sed rutrum nisi ultricies a. Aliquam pellentesque ante at ipsum convallis porta.</p>
    </div>
</div>

label
{
    color:red !important;
}

/* Basic typo (not problem related) */
body {
  font-family: Georgia, serif;
  font-size: 82.5%;
  line-height: 1.167;
  color: #555;
}

h1, h2 {
  color: #222;
}

h1 {
  font-size: 1.167em;
}

h2 {
  font-size: 1em;
}

/* Problem related styles */

.wrapper {
  position: relative;
  width: 580px;
  margin: 2em auto;
}

.content p {
  width: 62.069%;
}

.accent {
  color: cornflowerblue;
  &:after {
    content: attr(data-meta);
    position: absolute;
    right: 0;
    width: 31.035%;
    transform:translateY(-50%)

  }
}

.accent-bottom {
  color: cornflowerblue;
  &:after {
      content: attr(data-meta);
    position: absolute;
    right: 0;
    width: 31.035%;
    bottom: 14%;
  }
}