div-box 相对两侧的内容和 before-element

Question

我有几个 div，其中一些 characters/words 作为内容，一个词作为前元素。我想要 div-box 左侧的 before-content 和右侧的内容：

BEFORE__________________________________________CONTENT BEFORE____________________________________OTHER 内容 BEFORE_____________________________________MORE 内容

前元素和内容之间的边距在这里不起作用，因为如果内容变长或变短，前元素也会移动。有谁知道如何设置它以便前元素和内容粘在 div 的两侧？我不想使用带有两个 div 的 flexbox，因为我想通过 CSS.

定义“之前”

基本代码如下：

.box {
    width: 500px;
    border-bottom: 2px solid var(--col2);
    text-align: right;
 }
 .box:before {
    content: "BEFORE";
    text-align: left;
 }

我已经尝试过 flexbox，但没有成功。前元素粘在内容上。

Answer 1

只需给 before 一个 position:absolute 和 left:0，.box 也应该有一个 position:relative

.container {
  margin: 0 auto;
  width:60%;
  height:200px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  background-color: silver;
}
.box {
  display: block;
  border-bottom: 2px solid red;
  text-align: right;
  position: relative;
  margin-bottom: 30px
}
.box:before {
  content: "BEFORE";
  position: absolute;
  left: 0;
}

<div class="container">
  <div class="box">
    Item One
  </div>
  <div class="box">
    Item Two
  </div>
  <div class="box">
    Item Three
  </div>
</div>

div-box 相对两侧的内容和 before-element

Content and before-element on opposite sides of div-box

html

css

pseudo-element