如何在Flex布局元素后添加竖线？拒绝position:absolute实现

重新开展网页设计工作，正在搭建个人作品集。当前需要在采用Flex布局的#welcome区块内的元素后添加竖线，希望保证布局的动态性，拒绝使用position:absolute这类临时解决方案。此前尝试过flex-wrap和索引等方法但未成功，现寻求可行的实现方案及优化建议。

现有代码 #

CSS代码

/* main-style.css */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap');
:root {
  --default-font: 'Century Gothic';
  --default-jp-font: 'Noto Sans JP';
}

* {
  margin: 0;
  padding: 0;
  font-family: var(--default-font);
  text-transform: uppercase;
}

html {
  overflow: scroll;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 1px;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgb(138, 33, 199);
}

body {
  background-color: #252525;
}

.body-wrapper {
  width: 100%;
  scroll-behavior: smooth;
}

section {
  height: 100vh;
}

#welcome {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/background-welcome.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

#welcome>.content-container {
  margin-top: 25%;
  margin-left: auto;
  background-color: rgba(255, 255, 255, 0.2);
  width: 20%;
  text-align: center;
  padding: 1.4% 0.4%;
  backdrop-filter: blur(2px);
  border: 2px solid white;
  flex-wrap: wrap;
}

#welcome>.content-container>p {
  color: wheat;
  font-size: 24px;
  letter-spacing: 3px;
}

#welcome>.content-container>p>b {
  color: #f5deb3;
}

#welcome>.side-content-container {
  margin-left: auto;
  height: 100%;
  justify-self: flex-end;
  padding-right: 2%;
  display: flex;
  align-items: center;
}

#welcome>.side-content-container>p {
  font-size: 26px;
  writing-mode: vertical-rl;
  letter-spacing: 1.5rem;
  color: transparent;
  background-image: url('../img/background-welcome.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  filter: brightness(500%);
}

.section-seperator {
  width: 100%;
  height: 0.2rem;
  background-color: white;
}

HTML代码

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>This is me. - Jxson</title>
  <link rel='stylesheet' type='text/css' media='screen' href='assets/css/main-style.css'>
</head>

<body>
  <div class="body-wrapper">
    <section id="welcome">
      <div class="content-container">
        <p>Hey! this is me:<br><b>{Jason}</b></p>
      </div>
      <div class="side-content-container">
        <p>私はアンを愛しています</p>
      </div>
      <div class="line">
      </div>
    </section>
    <div class="section-seperator">

    </div>
    <section>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio error quos dolores blanditiis reiciendis illum sit veniam temporibus, sapiente earum iure, reprehenderit sequi, quae assumenda est alias incidunt iusto!</p>
    </section>
  </div>
</body>

</html>

可行实现方案 #

方法一：用Flex容器伪元素生成竖线（无需额外HTML） #

直接给#welcome容器加伪元素，完全适配Flex的动态布局，不用额外DOM元素：

#welcome {
  /* 替换原justify-content，让元素分布在两侧 */
  justify-content: space-between;
  /* 加左右内边距避免元素贴边 */
  padding: 0 2%;
}

#welcome::after {
  content: '';
  /* 竖线样式 */
  width: 2px;
  background-color: white;
  /* 让竖线拉伸至容器全高，依赖Flex的align-items */
  align-self: stretch;
  /* 调整和右侧元素的间距 */
  margin-right: calc(2% - 2px);
}

方法二：优化现有.line元素适配Flex布局 #

如果想保留HTML里的.line，只需给它加以下样式，让它融入Flex流：

#welcome {
  justify-content: space-between;
  padding: 0 2%;
}

#welcome .line {
  width: 2px;
  background-color: white;
  /* 拉伸至容器全高 */
  align-self: stretch;
  /* 调整间距 */
  margin: 0 2%;
}

两种方法都能让竖线随容器高度动态变化，完全贴合Flex布局的特性，不会出现定位偏移的问题。

布局优化建议 #

• 删掉content-container上的margin-top:25%，改用align-items: flex-end或者给#welcome加padding-top，固定百分比会在不同屏幕尺寸下出现布局错乱
• 把content-container的width:20%改成max-width:300px; width:100%;，提升移动端的适配性，避免窄屏里容器过窄
• 移除side-content-container的height:100%，改用align-self: stretch，让它自动匹配容器高度，同时保持文字垂直居中
• 把竖线颜色改成CSS变量，比如var(--border-color)，后续改色只需调整变量，不用找遍代码

内容的提问来源于stack exchange，提问作者JXc