如何在 css 中将顶部栏移到左侧？

Question

I have this div that shows a top red bar . I've been trying to move this bar to the left side and make it look like a border left, but not having any luck. Does anyone know how to make it look like a border lef t using this code? Thanks in advance!

 .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: 6px; width: 100%; top: 0; left: 0; background-color: red; }

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

Answer 1

This example adjusted position of ::after to make the red border appear on the left, hopefully close to the desired result.

 .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; width: 6px; inset: 0; background-color: red; }

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

Answer 2

You can set border-left: 6px solid red; on the container class and remove background-color: red; from .container::after

Additionally, if you want to keep the grey border, just apply that style to each other sides of the container like so:

  border-top: 2px solid #e1e4e8;
  border-bottom: 2px solid #e1e4e8;
  border-right: 2px solid #e1e4e8;

See snippet below:

 .container { position: absolute; display: block; width: 100%; padding: 18px; margin-bottom: 16px; border-radius: 8px; border-left: 6px solid red; border-top: 2px solid #e1e4e8; border-bottom: 2px solid #e1e4e8; border-right: 2px solid #e1e4e8; overflow: hidden; }.container::after { content: ''; position: absolute; display: block; height: 6px; width: 100%; top: 0; left: 0; }

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

Answer 3

Perhaps just simplify it to a border?

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

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

Answer 4

You can also use a mixed border style and use hidden for the top, bottom, and right. usage is described at W3Schools