How to move Top bar to left side in css?-CodePudding

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 left 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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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