Kevin Powell - Community•15mo ago

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

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

6 Replies

Choo♚𝕂𝕚𝕟𝕘•15mo ago

Add either a left or right border.

MoniOP•15mo ago

i add it but it takes the div height i want small vertical line

Choo♚𝕂𝕚𝕟𝕘•15mo 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•15mo ago

You should use ::pseudo element ::after ::before 👍

ericaldo•15mo ago

i would just use a svg of a line

ceispy•15mo ago

Absolute positioning ::before or ::after is quick and easy

Gaming

Programming

Add vertical line