Facebook Like Chain Comments

comments.html

<ul class="chat-container">
  <li class="message" id="message-1">
    <img src="https://picsum.photos/40/40" alt="User 1" class="avatar">
    <div class="message-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam nobis, sed? Consequatur doloremque fugiat minima nostrum quia! Aperiam in, magni minima officiis pariatur reiciendis sed. Eligendi enim facere maxime pariatur repellendus sapiente? Amet beatae blanditiis consequatur corporis doloribus ducimus eaque eligendi, error excepturi illo impedit iste natus neque porro quae quas quod repudiandae unde vel voluptate. Alias animi autem consequuntur, dignissimos doloremque earum eum eveniet fuga impedit laborum maiores modi mollitia nesciunt nobis non omnis, quam quas quasi quibusdam repudiandae rerum sapiente sint vitae voluptatibus voluptatum? Aliquid culpa, cumque id molestias mollitia perspiciatis qui quos repellat sint tempora unde voluptas?</div>
    <ul class="replies">
      <li class="message reply" id="reply-1-1">
        <img src="https://picsum.photos/40/40" alt="User 2" class="avatar">
        <div class="message-content">This is a reply to the first message.</div>
        <ul class="replies">
          <li class="message reply" id="reply-1-1-1">
            <img src="https://picsum.photos/40/40" alt="User 3" class="avatar">
            <div class="message-content">This is a nested reply.</div>
          </li>
        </ul>
      </li>
      <li class="message reply" id="reply-1-2">
        <img src="https://picsum.photos/40/40" alt="User 4" class="avatar">
        <div class="message-content">Another reply to the first message.</div>
      </li>
    </ul>
  </li>
</ul>

style.css

.chat-container {
  list-style-type: none;  /* Remove default list styling */
  max-width: 600px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.message {
  position: relative;
  padding: 10px 20px 10px 60px;
  /* Adjust padding to make space for the avatar */
  border-radius: 5px;
  margin-bottom: 10px;
}

.message.reply {}

.avatar {
  position: absolute;
  top: 0;
  left: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #ccc;
}

.message-content {
  position: relative;
  z-index: 2;
}

.replies {
  list-style-type: none;  /* Remove default list styling */
  margin-top: 30px;
  margin-left: 25px;
  /* Align nested replies with avatars */
  padding-left: 0;
}

.message::before {
  content: '';
  position: absolute;
  left: 30px;
  /* Align with the center of the avatar */
  top: 0;
  bottom: 60px; /* Adjusted to align with ::after */
  width: 1px;  
  background: #ddd;
}

.message.reply::before {
  background: #dddddd;
}

.message.reply::after {
  content: '';
  position: absolute;
  left: -55px;
  /* Align with the center of the avatar */
  top: 0px;
  /* Start from the center of the avatar */
  width: 60px;
  /* Below modifications done to look rounded threads */
  height: 20px;
  border-color: #dddddd;
  border-width: 0 0 1px 1px;
  border-style: solid;
  border-bottom-left-radius: 20px;
}