I would like to create a vertical line similar to the ones seen on Twitter

Question

I would like to create a vertical line similar to the ones seen on Twitter

I'm currently working on a project to create a social media platform similar to Twitter. One thing I'm trying to accomplish is to draw a vertical line between two images, like the one in this tweet from PewDiePie, and have it centered between two separate <div> elements.

So far, I've attempted placing a

<div class="vertical-line"></div>

after the image <div>.

.vertical-line {
    border-width: 2px;
    border-top-left-radius: 2px;
    border-color: #1da1f2;
    border-style: solid;
}

After implementing this CSS, the result looked like this.

css bootstrap-4

Answer 1

Answer №1

To easily generate a vertical line using only CSS, the method is to utilize the border-left property within an empty div with a defined height. As pointed out by tkore in the comments, calculating the height of the .line class using JS is necessary based on the gap between the images, as this value is not predetermined. However, the remaining code will function without any issues.

img {
    border-radius: 50%;
    margin: 5px;
}

.line {
    position: relative;
    bottom: 2px;
    left: 38px;
    border-left: 6px solid red;
    height: 85px;
}

<img src="https://pbs.twimg.com/profile_images/1113436678050316289/t-Agpngx_bigger.jpg">
<div class="line"></div>
<img src="https://pbs.twimg.com/profile_images/1113436678050316289/t-Agpngx_bigger.jpg">

Another option is to utilize pseudoelement selectors for creating a vertical line. However, without having access to your specific code, providing a precise answer using this technique would be challenging.

Answer 2

To easily generate a vertical line using only CSS, the method is to utilize the border-left property within an empty div with a defined height. As pointed out by tkore in the comments, calculating the height of the .line class using JS is necessary based on the gap between the images, as this value is not predetermined. However, the remaining code will function without any issues.

img {
    border-radius: 50%;
    margin: 5px;
}

.line {
    position: relative;
    bottom: 2px;
    left: 38px;
    border-left: 6px solid red;
    height: 85px;
}

<img src="https://pbs.twimg.com/profile_images/1113436678050316289/t-Agpngx_bigger.jpg">
<div class="line"></div>
<img src="https://pbs.twimg.com/profile_images/1113436678050316289/t-Agpngx_bigger.jpg">

Another option is to utilize pseudoelement selectors for creating a vertical line. However, without having access to your specific code, providing a precise answer using this technique would be challenging.

Answer 3

Answer №2

My coding skills are put to the test with each basic listing that I write. The content dictates the layout, as the left bar expands with more content. Give this code a try, it should provide some assistance. Thank you.

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: flex;
  height: auto;
  overflow: hidden;
}

li:last-child .line {
  display: none;
}

.avatarWrap {
  display: flex;
  flex-direction: column;
  width: 28px;
}

.avatarWrap .circle {
  background-color: #ccc;
  border: 3px solid #fff;
  border-radius: 25px;
  display: block;
  flex-shrink: 0;
  position: relative;
  height: 22px;
  width: 22px;
}

.avatarWrap .line {
  background-color: #ccc;
  border-radius: 3px;
  content: '';
  display: block;
  flex: 1;
  height: 100%;  
  margin-left: 11px;
  width: 5px;
}

.content {
  font-size: 12px;
  margin: 8px 0 0 20px;
}

<ul>
  <li>
    <div class="avatarWrap">
      <span class="circle"></span>
      <span class="line"></span>
    </div>
    <div class="content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </li>
  <li>
    <div class="avatarWrap">
      <span class="circle"></span>
      <span class="line"></span>
    </div>
    <div class="content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </li>
  <li>
    <div class="avatarWrap">
      <span class="circle"></span>
      <span class="line"></span>
    </div>
    <div class="content">
      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form,
    </div>
  </li>
  <li>
    <div class="avatarWrap">
      <span class="circle"></span>
      <span class="line"></span>
    </div>
    <div class="content">
      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form,
    </div>
  </li>
</ul>

Answer 4

My coding skills are put to the test with each basic listing that I write. The content dictates the layout, as the left bar expands with more content. Give this code a try, it should provide some assistance. Thank you.

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: flex;
  height: auto;
  overflow: hidden;
}

li:last-child .line {
  display: none;
}

.avatarWrap {
  display: flex;
  flex-direction: column;
  width: 28px;
}

.avatarWrap .circle {
  background-color: #ccc;
  border: 3px solid #fff;
  border-radius: 25px;
  display: block;
  flex-shrink: 0;
  position: relative;
  height: 22px;
  width: 22px;
}

.avatarWrap .line {
  background-color: #ccc;
  border-radius: 3px;
  content: '';
  display: block;
  flex: 1;
  height: 100%;  
  margin-left: 11px;
  width: 5px;
}

.content {
  font-size: 12px;
  margin: 8px 0 0 20px;
}

<ul>
  <li>
    <div class="avatarWrap">
      <span class="circle"></span>
      <span class="line"></span>
    </div>
    <div class="content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </li>
  <li>
    <div class="avatarWrap">
      <span class="circle"></span>
      <span class="line"></span>
    </div>
    <div class="content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </li>
  <li>
    <div class="avatarWrap">
      <span class="circle"></span>
      <span class="line"></span>
    </div>
    <div class="content">
      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form,
    </div>
  </li>
  <li>
    <div class="avatarWrap">
      <span class="circle"></span>
      <span class="line"></span>
    </div>
    <div class="content">
      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form,
    </div>
  </li>
</ul>

Answer 5

Answer №3

A clever technique to achieve the desired effect is by using a negative margin along with positive padding. By utilizing this method, you can effectively push the top element down to the child element, allowing the line to be drawn and then repositioned using padding. This eliminates the need for javascript or any additional complexities.

.tweet {
  height: 100px;
  background-color: yellow;
  width: 40px
}
.avatar {
  width: 40px;
}
.vertical-line {
  margin-bottom: -60px;
  padding-bottom: 60px;
  background: linear-gradient(#ff0000, #ff0000) no-repeat center/2px 100%;
}

<div class="tweet " style="background-color: pink">

  <div class="avatar vertical-line">
    <img src="https://i.pravatar.cc/40">
  </div>

</div>

<div class="tweet" style="background-color=yellow">

  <div class="avatar">
    <img src="https://i.pravatar.cc/40">
  </div>

</div>

Answer 6

A clever technique to achieve the desired effect is by using a negative margin along with positive padding. By utilizing this method, you can effectively push the top element down to the child element, allowing the line to be drawn and then repositioned using padding. This eliminates the need for javascript or any additional complexities.

.tweet {
  height: 100px;
  background-color: yellow;
  width: 40px
}
.avatar {
  width: 40px;
}
.vertical-line {
  margin-bottom: -60px;
  padding-bottom: 60px;
  background: linear-gradient(#ff0000, #ff0000) no-repeat center/2px 100%;
}

<div class="tweet " style="background-color: pink">

  <div class="avatar vertical-line">
    <img src="https://i.pravatar.cc/40">
  </div>

</div>

<div class="tweet" style="background-color=yellow">

  <div class="avatar">
    <img src="https://i.pravatar.cc/40">
  </div>

</div>

I would like to create a vertical line similar to the ones seen on Twitter

Answer №1

Answer №2

Answer №3

Similar questions

Tips for customizing a button's font with CSS

Customize JqGrid Edit/Delete button CSS style

What steps should be taken to prevent divs from overlapping a centrally positioned, unchanging div when the browser is resized

Tips for resolving Layout Shift issues in responsive images utilizing the picture & source HTML tags

How to bring in Bootstrap 4 Sass mixins to the scss editor on codepen.io

A guide on triggering a new chart to appear beside the adjacent <div> when a bar is clicked in a highchart

Button-controlled automated presentation

Setting objects in parallel in HTML involves using the display property along with the value

Aligning the text in the middle of a button

Could this be the most straightforward and versatile method for vertically centering text inside a block element?

What methods can I use to identify the selector for this element?

Combining two images using HTML and CSS resulted in conflicts when attempting to overlay any additional elements

Is it possible to rotate the caret in the dropdown 180 degrees using only CSS?

Design a styled rectangular tab using CSS

Bootstrap 5: After tapping on the button, the hue was transformed

Exploring the functions of Safari input types: search, reset, and normalize

Tips on ensuring that PRE elements expand to fit column size without growing when additional data is added

PHP function that verifies the post category and dynamically modifies a specific CSS element associated with it (without using WordPress)

How can I synchronize two webkit-animations at the same speed but with one covering a greater distance?

Inject some vibrancy by incorporating color in the space between the navbar and banner on the