Html 如何将：：前和：：后放置在父级上方和相邻位置

如何将两个伪元素放置在父元素上方且彼此相邻的位置上？前后都是文本值。它们的颜色和内容不同

一个完美的解决方案是在

元素之前创建一个
：：，给它一个
显示：block
，这样它就出现在父元素的上方，然后给自己一个
：：after
，但不可能在另一个伪元素上定义一个伪元素

<h1>
    <svg></svg>
    <span> 
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying 
    </span>
</h1>
span::before{
  content:'Lorem ipsum, or lipsum';
}

span::after{
  content:'.';
  color: red;
}

before的内容通常比的内容短，但并不总是如此。

h1.额外跨度{
显示器：flex；
柔性包装：包装；
背景：金；
}
h1.额外跨度：：之前{
字号：1rem；
内容：attr（以前的数据）；
顺序：-1；
}
h1.额外跨度：：之后{
字号：1rem；
内容：attr（后面的数据）；
顺序：-1；
颜色：红色；
弹性基准：50%；
柔性生长：1；
}

Lorem ipsum，或者有时称为lipsum，是用于铺设的虚拟文本
不管3个元素的大小，style:：before和:：after都不可能彼此相邻并位于其父元素之上。
我在DOM结构中引入了一个新元素：

        <h1 class="title">
            <span class="title__main" :data-before="mainTitle" :data-after="."></span>
            <span class="title__sub">{{subTitle}}</span>
        </h1>


{{副标题}

现在，定位一切都变得容易多了。
您在这里到底想做什么？听起来很像一个。可能的解决方案很大程度上取决于实际的字符串长度和上下文。所以你应该编辑你的作品并加入真实世界的例子。詹姆斯·科伊尔：也许你是对的。我试图指定OP提供的代码和预期的输出。@user2923339您使用的是
元素。这是否意味着span应该是一个内联元素，并且仍然是一个内联元素，即使添加了
：before
和
：：after
内容？@user2923339这将是一个重要的信息，而不是应该进入这个问题。Yunzen感谢您的解决方案。然而，LGSon是对的。如果我们修改字符串大小，则解决方案将中断。OP已编辑-我添加了有关示例性文本值的信息。Text2是一个点text1通常很短，里面的文本很长。感谢下一个解决方案。如果的文本比中的文本短，则此选项将中断：before@user2923339添加<代码> Flex Guest:1 到后置元素，并考虑<代码> Flex  >代码>内联Flex  @ USER，2623，33，我做了一些修改。也许现在适合你了？
        <h1 class="title">
            <span class="title__main" :data-before="mainTitle" :data-after="."></span>
            <span class="title__sub">{{subTitle}}</span>
        </h1>