如何将 ::before 和 ::after 放置在父级上方并彼此相邻

Question

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

一个完美的解决方案是制作一个 ::before 元素，给它 display: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;
}

预期结果为：

Lorem ipsum, or lipsum.

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying

before 的内容通常比 but not always 的内容短。

Answer 1

h1.extra span {
  display: flex;
  flex-wrap: wrap;
  background: gold;
}

h1.extra span::before {
  font-size: 1rem;
  content: attr(data-before);
  order: -1;
}

h1.extra span::after {
  font-size: 1rem;
  content: attr(data-after);
  order: -1;
  color: red;
  flex-basis: 50%;
  flex-grow: 1;
}

<h1 class="extra">
  <svg></svg>
  <span data-before="Lorem ipsum, or lipsum" data-after="..."> 
  Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying 
</span>
</h1>

Answer 2

不可能将 ::before 和 ::after 的样式设置为彼此相邻并独立于 3 个元素的大小而位于其父元素之上。我在DOM结构中引入了一个新元素：

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

现在定位所有内容变得容易多了。

如何将 ::before 和 ::after 放置在父级上方并彼此相邻

How to position ::before and ::after above parent and next to each other

html

css

pseudo-element