KPC
Kevin Powell - Community•9mo ago
Moni

Add vertical line

how can i add vertical line like in image i have tried it by using border-left but it height become equal to the div height check the attach image and here is my code link"https://play.tailwindcss.com/NS1BlJ5Wh3?file=css
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
No description
6 Replies
ChooKing
ChooKing•9mo ago
Add either a left or right border.
Moni
Moni•9mo ago
i add it but it takes the div height i want small vertical line
ChooKing
ChooKing•9mo ago
Make an extra div to hold the two p tags and put the border on that. 
<div class="border-l-4 px-4">
  <p style="font-weight: 500; font-size: 14px;color: #90958d; ">Cliente sin cita previa</p>
  <p style="color: #d3cdc3;">Afeltado</p>
</div>
<div class="border-l-4 px-4">
  <p style="font-weight: 500; font-size: 14px;color: #90958d; ">Cliente sin cita previa</p>
  <p style="color: #d3cdc3;">Afeltado</p>
</div>
Witcher
Witcher•9mo ago
You should use ::pseudo element ::after ::before 👍
ericaldo
ericaldo•9mo ago
i would just use a svg of a line
ceispy
ceispy•9mo ago
Absolute positioning ::before or ::after is quick and easy
Want results from more Discord servers?
Add your server
More Posts
Small white space at the bottom of my website.I am making a website using react and tailwind but I just came across some white space at the bottomcustom property choicesHey, i've been seeing many ways to go about custom properties and i'm wondering what exactly the mosgoogle-webfonts-helperA Hassle-Free Way to Self-Host Google Fonts https://gwfh.mranftl.com/fonts Tutorial: https://www.youFree for DevelopersDevelopers and Open Source authors now have a massive amount of services offering free tiers, but iti need help with a web pagei made a web page with CSS but have some problems with images.. any help plz ?Centering with Absolute PositioningHow would I center this Div using Absolute positioning? https://codepen.io/Matt-CopOffMatt/pen/MWZbNUseful article on REMServer member @caiomarcellus posted this very useful article in #self-promotionthat gives a good explittle problem with gridCodepen: https://codepen.io/rwxganta/pen/bGOBPzd Hi, ya'll o/ So, I'm doing this TODO list project Self-Host solution ( CapRover )https://www.youtube.com/watch?v=NLjolI9FwCU While its a example using SvelteKit you can follow a lonFirst Iteration Glitch?Would you happen to know why the first iteration doesn't get the transition class? https://gyazo.com