Connecting two anchor elements with a straight vertical line

VISUAL REPRESENTATION

Is there a way to add a vertical line between two empty elements in HTML without affecting the layout or interrupting the content? The line should be positioned to the left of the text and should span across multiple paragraphs regardless of the hierarchy of the elements. Any suggestions on how to achieve this using jQuery or JavaScript?

Here is a sample of the HTML code that illustrates the issue:

  <div>
        <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br /> sed diam nonumy eirmod
                tempor invidunt ut labore<span id="start_line-1"/> et dolore magna aliquyam
                erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                Stet clita kasd gubergren, no sea takimata sanctus est<br /> Lorem ipsum dolor sit
                amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
                eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
                no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
        <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br /> sed diam nonumy eirmod
                tempor invidunt ut labore<span id="end_line-1"/> et dolore magna aliquyam
                erat, sed diam voluptua. 
        </p>
        <span id="start_line-2"/>
        <span>At vero eos et accusam et justo duo dolores et ea rebum. Stet<br /> clita kasd
                gubergren, no sea takimata sanctus est<br /> Lorem ipsum dolor sit amet.</span>
        <span id="end_line-2"/>
  </div>
javascriptjqueryhtmlcss

Answer №1

It is achievable to achieve your desired result without utilizing <div> within <p> tags.

.vertical-line {
    border-left: 4px solid red;
    height: auto;
    padding-left: 5px;
}

.transparent {
border-left: 4px solid transparent;
}
<div class="vertical-line transparent">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
</div>
<div class="vertical-line">
  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
  erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  Stet clita kasd gubergren, no sea takimata sanctus est<br /> 
  Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
  no sea takimata sanctus est Lorem ipsum dolor sit amet.
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br /> 
  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed 
</div>
<div class="vertical-line transparent">
  diam voluptua.
</div>
<div class="vertical-line">
  At vero eos et accusam et justo duo dolores et ea rebum. Stet<br /> 
  clita kasd gubergren, no sea takimata sanctus est<br /> 
  Lorem ipsum dolor sit amet.
</div>

Answer №2

From what I gather from your query, here is what you are looking for. To add a vertical line to a specific section of a paragraph, wrap it in a span tag as shown below. Feel free to test the code,

span.container:before {
  content: "";
  background-color: red;
  position: absolute;
  width: 5px;
  left:0;
  height: 100%;
}

span.container {
  position: relative;
  padding-left:10px;
  display:block;
}

div.main {
  padding-left:10px;
}
    <div class="main">
   <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br /> sed diam nonumy eirmod
      tempor invidunt ut labore
   <span class="container">
      et dolore magna aliquyam
      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      Stet clita kasd gubergren, no sea takimata sanctus est<br /> Lorem ipsum dolor sit
      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
      no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
      <p>
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br /> sed diam nonumy eirmod
         tempor invidunt ut labore
   </span>
   et dolore magna aliquyam
   erat, sed diam voluptua. 
   </p>
   <span class="container">
      <span>At vero eos et accusam et justo duo dolores et ea rebum. Stet<br /> clita kasd
      gubergren, no sea takimata sanctus est<br /> Lorem ipsum dolor sit amet.</span>
   </span>
</div>

Rather than using spans to mark the start/end points (which may not achieve the desired vertical line effect), you can wrap the content within a container.

Answer №3

One possible solution could be to utilize HTML entities such as — and apply a CSS transformation to rotate it. You can achieve this effect by using the following CSS rule: transform: rotate(90deg)

Answer №4

.obj .obj1 {
  position: relative;
  border-left: 4px solid red;
  padding-left: 5px;
  display: flex;
  width: 50%;
  flex-wrap: wrap;
}
<div class='obj'>

  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br /> sed diam nonumy eirmod tempor invidunt ut labore<span id="start_line-1" /> et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
    clita kasd gubergren, no sea takimata sanctus est<br /> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br /> sed diam nonumy eirmod tempor invidunt ut labore<span id="end_line-1" /> et dolore magna aliquyam erat, sed diam voluptua. </p>


  <span class='obj1'>At vero eos et accusam et justo duo dolores et ea rebum. Stet<br /> clita kasd
                gubergren, no sea takimata sanctus est<br /> Lorem ipsum dolor sit amet.</span>

</div>

You are allowed to utilize the css rules provided in the example.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Double tap on the YouTube video

Recently, I added a YouTube video to my project. However, I am encountering an issue where when I double click on the video, it opens in a new tab. What I actually want is for the video to open in full screen when clicked. Appreciate any help! ...

asp.nethtmlyoutube

JS (jQuery) not working as expected - Laravel 8 integrated with Bootstrap 5 and jQuery

Having difficulty integrating bootstrap and jQuery with Laravel 8. Despite following multiple tutorials and meticulously following the steps, the buttons remain unclickable. It seems like the click function is not running at all. The app was initialized u ...

jquerylaravelbootstrap-5

Is there a way to shift a button within a div to the right while maintaining alignment?

After spending hours on this problem, I attempted to use "float: right" and successfully moved the button to the right. However, in doing so, the tag is no longer vertically centered. Can someone please assist me with this? Also, if there are multiple sol ...

css

PHP - Dynamically populating form questions based on user input

Currently, I am in the process of developing a fuel calculator form that utilizes PHP and HTML. The form is taking shape nicely, but there is one particular aspect that has me stuck. I want to incorporate a fuel perks feature that requires user input. Spe ...

phphtmlformsuser-input

Storing user input in an existing text file using ASP.NET MVC

What steps should I take to store user form input from a view into an already existing text file using the ASP.NET MVC framework? ...

c#htmlasp.net-mvc-4

Set the status to 0 when the user exits the browser

I am currently working on developing a straightforward system to indicate whether the user is online or not. However, I have encountered a specific issue. Once the user closes the tab or the browser, the ajax code fails to refresh the page that tracks use ...

phpjquerysession

CSS animation for horizontal scrolling with sticky positioning is not functioning as intended

I've designed a creative way to achieve infinite horizontal scrolling using CSS animation, and my goal is to make the first element in the list stick in place. Everything works smoothly when I utilize the left property within the @keyframes. However, ...

htmlcsscss-animationscss-positioncss-transforms

Utilizing Aramex API in React Native: A Step-by-Step Guide

Currently, I am tackling an eCommerce venture that requires the utilization of Aramex APIs for shipping and other functionalities. Since my project is being developed in React Native, I am seeking guidance on how to integrate Aramex APIs into this framewo ...

javascriptandroidiosreact-nativearamex

Issue encountered when employing the spread operator on objects containing optional properties

To transform initial data into functional data, each with its own type, I need to address the optional names in the initial data. When converting to working data, I assign a default value of '__unknown__' for empty names. Check out this code sni ...

javascriptecmascript-6undefinedjavascript-objectsflowtype

Button press triggers the fadeIn function successfully, but the keypress event does not have the same effect

I'm currently facing an issue with two div elements on my webpage. I want only one of them to be visible at a time, depending on which key is pressed. If the 1 key is pressed, I want 'div1' to fadeIn (if it's not already visible) and fo ...

javascriptjqueryhtmlcss

Troubleshooting the clonewithrows array problem in react-native

I am currently facing an issue while trying to populate a Listview in my react-native application using data from Firebase. The error message I am receiving is as follows: "Objects are not valid as a React child (found object with keys {title}). If you me ...

javascriptiosreactjsfirebasereact-native

Using GSAP to create a staggered animation with a negative delay

Seeking a Solution: I am curious if there is a method to incorporate a negative delay into the staggerFrom / staggerTo functions within greensock? Issue at Hand: The current animation I have in place is extending longer than desired. It would be benefic ...

javascriptgsap

I'm stumped trying to understand why I keep getting this syntax error. Any thoughts on how to fix it?

Our team is currently working on creating a dynamic SELECT box with autocomplete functionality, inspired by the Standard Select found at this link: We encountered an issue where the SELECT box was not populating as expected. After further investigation, ...

javascriptjqueryajax

Is there a way to smoothly navigate back to the top of the page after the fragment identifier causes the page to scroll down?

I do not want to disable the functionality of the fragment identifier. My goal is for the page to automatically scroll back to the top after navigating to a specific section. This inquiry pertains to utilizing jQuery's UI tabs. It is crucial to have ...

javascriptjqueryhtml

Autocomplete feature in Material-UI does not trigger the onChange event when a chip

I've encountered a quirk with the Material UI Autocomplete component. It seems that when I delete a tag directly from the chip using the (x) button, the onchange function of the autocomplete isn't triggered. Does anyone know how I can ensure that ...

javascriptreactjsmaterial-ui

How can you modify Jquery show_hide so that the page automatically scrolls to the bottom of the concealed field when the button is clicked?

On my website, there is a button that reveals a map when clicked. The button is visible when the page loads, but once clicked, the map slides open and goes out of sight since the page loads at the top as usual. My goal is to have the page automatically scr ...

javascriptjquery

Steps for clearing a set of checkboxes when a different checkbox is selected

While working on a website I'm developing, I encountered an issue with the search function I created. The search function includes a list of categories that users can select or deselect to filter items. This feature is very similar to how Coursera has ...

javascripthtmldomwebcheckbox

Is it possible to showcase multiple items in react JS based on logical operators?

How can I update the navigation bar to display different menu options based on the user's login status? When a user is logged in, the "Logout", "Add Product", and "Manage Inventory" options should be shown. If a user is not logged in, only the "Home" ...

javascriptreactjs

Is it a graphics card malfunction or a coding complication? Delving into THREE.JS WebGL

Recently, I created a cool scene using three.js that was running perfectly until today. Strangely, without any changes to the code, I started encountering an error in every major browser - Chrome, Firefox, and Edge. The error message I am seeing is: THREE. ...

javascriptthree.jswebgl

Issues with slow scrolling and sticky sidebar on websites with infinite scrolling feature

My webpage has a sidebar that is supposed to scroll down with the page. However, I am experiencing some lagging issues where the sidebar appears a few seconds after scrolling. Additionally, the sidebar keeps moving downwards, making the page longer and cau ...

javascriptjquerysticky