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>
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>
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>
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>
You can also use a mixed border style and use hidden for the top, bottom, and right. usage is described at W3Schools
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.