如何用CSS将顶部红色栏移至左侧并实现左侧边框效果？

只需要调整.container::after伪元素的几个核心属性，就能把顶部红色栏改成左侧纵向的边框样式：

• 将height设置为100%，让红色条高度铺满整个容器
• 将width设置为6px，定义左侧边框的宽度
• 保持top: 0和left: 0的定位，让红色条紧贴容器左侧边缘

修改后的完整CSS代码如下：

.container {
  position: relative;
  width: 100%;
  padding: 18px;
  margin-bottom: 16px;
  border-radius: 8px;
  border: solid 2px #e1e4e8;
  overflow: hidden;
}

.container::after {
  content: '';
  position: absolute;
  display: block;
  height: 100%; /* 修改为100% */
  width: 6px; /* 修改为6px */
  top: 0;
  left: 0;
  background-color: red;
}

HTML代码无需改动：

<div class="container">this is a text</div>

这样修改后，红色条就会变成容器左侧的垂直边框样式，同时overflow: hidden会确保它不会超出容器的圆角范围。

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