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

如何解决div-box 两侧的内容和 before-element

我有几个 div，其中几个字符/单词作为内容，一个单词作为元素之前。我想要div-Box左侧的before-content和右侧的内容：

在__________________________________________内容之前 之前____________________________________其他内容 之前_____________________________________更多内容

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

基本代码如下：

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

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

解决方法

只需给 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>