How to Make a Vertical Line in Html

How to make a vertical line in HTML

Put a <div> around the markup where you want the line to appear to next, and use CSS to style it:

.verticalLine {  border-left: thick solid #ff0000;}

<div class="verticalLine">  some other content</div>

vertical lines in HTML CSS

Use CSS and border.

Remove the right border from the :last-child

.row {
  display: flex;
  justify-content: center;
}

.links a {
  padding: 0 1.2rem;
  border-right: 2px solid #888;
}

.links a:last-child {
  border-right: 0;
}

<div class="row links">
  <a href="#">Some link 1</a>
  <a href="#">Some link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Some link 4</a>
</div>

HTML CSS Vertical Line with exact height of a div

You can attain it using a simple border on the left.

.mytext {
  border-left:3px solid red;
  padding-left:15px;
  }

<div class="mytext">
<h1>Head<h1>
<p>text here</p>
<p>text here</p>
<p>text here</p>
<p>text here</p>
<p>text here</p>
<p>text here</p>
<p>text here</p>
</div>

How to Add a Vertical Line Above and Below an Element

There are a few different, decent ways of achieving this, but I think Flexbox layout is a good one. Basically, you make a container for your modal, a div for each 'side pane', then one more for the center separator.

Flex box allows you to split the width or height of a container amongst its children elements. So in this case, you'd have the outer container be display:flex; flex-direction: row to stack everything horizontally, then the center separator be display:flex; flex-direction: column to center the 'or' disc vertically.

This is nice because it allows the layout to adapt to different amounts of content in each side pane - you don't need to fine-tune the positioning, centering or widths and heights to the content so much.

.container {
  border: 1px solid red;
  display: flex;
  flex-direction: row;
  width: 90%;
  margin: 0 auto;
}

/* Each side of the modal. flex: 1 means they will take priority over the separator - they'll get as much of the width as possible, while the separator gets only what it needs */
.container .pane {
  border: 1px solid green;
  flex: 1;
  padding: 1rem;
}

/* This is the box that holds the disc and the vertical line */
.container .separator {
  padding: 1rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* The vertical line is added with the ::after pseudo element - it sits under the disc, and is absolutely positioned to the top/bottom and center */
.container .separator::after {
  content: '';
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 50%;
  border-right: 1px solid #CCC;
  z-index: 1;
}

/* This is the 'or' disc itself. Positioned relative and given a higher z-index so it sits on top of the line. */
.container .separator span {       
  padding: 1rem;
  text-align: center;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  border-radius: 50%;
  border: 1px solid #CCC;
  background: #FFF;
  display: block;
  position: relative;
  z-index: 2;
}

<div class="container">
  <div class="pane">
    <p>Perspiciatis minima qui repudiandae quaerat. Voluptatibus dolores totam ut aut qui doloribus illum. Maxime minus rerum unde voluptas. Aspernatur facilis exercitationem qui aspernatur. Odit qui in aut modi asperiores recusandae sit.</p>
  </div>
  <div class="separator">
    <span>or</span>
  </div>
  <div class="pane">
    <p>Perspiciatis minima qui repudiandae quaerat. Voluptatibus dolores totam ut aut qui doloribus illum.</p>
  </div>
</div>

How to create a vertical line in HTML

You can use CSS with position to achieve it along with ::before:

.circle {
  width: 100px;
  height: 100px;
  border: 2px solid #ccc;
  border-radius: 100%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  position: relative;
  margin-top: 50px;
}
.circle:first-child {
  margin-top: 0;
}
.circle::after {
  position: absolute;
  content: "";
  display: block;
  border: 2px solid #ccc;
  left: 50%;
  bottom: 100%;
  height: 50px;
  margin-left: -2px;
}
.circle:first-child::after {
  display: none;
}

<div class="wrap">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

How do I make a vertical line with text in the middle surrounded by two divs? - html/css

You can achieve this with align-items: center on the wrapper and two pseudo elements ::before and ::after which you set to width: 0 and its border to 1px, so that it becomes 2px (border-left + border-right). The wrapper needs position: relative for that.

The pseudo elements are positioned absolutely and can be alligned to the center by setting its left property to 50%. "Below" and "above" are controlled by bottom: 0 and top: 0.

.holderCalc {
  margin: auto;
  width: 75%;
  border: solid 2px black;
  text-align: center;
  padding: 10px;
}

.wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.divCalc1 {}

.divCalc1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 40%;
  border: solid 1px black;
}

.divCalc1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 40%;
  border: solid 1px black;
}

.divCalc2 {
  color: black;
  text-align: center;
  font-size: 16px;
}

.divLine1 {
  width: 80.7%;
}

.divLine2 {
  width: 90.8%;
}

.lxbBox {
  width: 50%;
}

.area10Calc {
  width: 50%;
}

.inputCalc {
  background-color: white;
  color: grey;
  width: 80%;
  height: 50px;
  border: solid 2px black;
  font-family: initial;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  font-family: futura-pt;
  padding: 2px;

<div class="holderCalc">
  <br>
  <div class="wrapper">
    <div class="lxbBox">
      <select class="inputCalc" id="ddm" onchange="areaUpdated()">
        <option value="mm">MILLIMETRES</option>
        <option value="cm">CENTIMETRES</option>
        <option value="inch">INCHES</option>
        <option value="m">METRES</option>
      </select><br><br>
      <input id="len" class="inputCalc" type="text" placeholder="LENGTH" autocomplete="off" onclick="lxbUpdated()" onchange="validateInput()"><br>
      <p class="divCalc2">X</p>
      <input id="wid" class="inputCalc" type="text" placeholder="WIDTH" autocomplete="off" onclick="lxbUpdated()" onchange="validateInput()">
    </div>
    <div class="divCalc1">OR</div>
    <div class="area10Calc">
      <input id="area" class="inputCalc" type="text" placeholder="AREA (M²)" autocomplete="off" onclick="areaUpdated()" onchange="validateInput()"><br><br><br>
      <hr class="divLine1" size="2px" color="black">
      <br>
      <input id="addWaste" type="checkbox">
      <label class="text" for="addWaste">ADD 10% FOR CUTS AND WASTES</label><br><br>
      <button onclick="calculate()" class="calculateButton">CALCULATE</button>
    </div>
  </div>
  <hr class="divLine2" size="2px" color="black">
  <p class="text" id="output">TO COVER 0.00M², YOU NEED 0 TILES</p>
</div>

How to create a vertical line on top of the text when it is active?

It looks like you're using Bootstrap? If so, the majority of the CSS may not work. The example below has Bootstrap 5 loaded, and your custom CSS was too complex to follow so I had to remove it (BS styles would inhibit most of it anyway), and the following CSS was added:

    .active {
      position: relative
    }
    
    .active::before {
      content: '|';
      position: absolute;
      left: calc(50% - 0.25ch);
      top: -1ch;
      color: tomato;
    }

This style will appear whenever a link is assigned .active. If the | is too tall, try decreasing font-size directly on the .active::before selector -- use Dev Tools to find the computed font-size of .active::before to get an idea of how much you should decrease it by. Also, I changed some of the BS classes according to BS suggested use.

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .active {
      position: relative
    }
    
    .active::before {
      content: '|';
      position: absolute;
      left: calc(50% - 0.25ch);
      top: -1ch;
      color: tomato;
    }
  </style>
</head>

<body>
  <main class="container">
    <section class="row">
      <nav class="col">
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <a href="#home" class="nav-link active">one</a>
          </li>
          <li class="nav-item">
            <a href="#about" class="nav-link">two</a>
          </li>
          <li class="nav-item">
            <a href="#service" class="nav-link">three</a>
          </li>
          <li class="nav-item">
            <a href="#promotion" class="nav-link">four</a>
          </li>
          <li class="nav-item">
            <a href="#customer" class="nav-link">five</a>
          </li>
          <li class="nav-item">
            <a href="#contact" class="nav-link">six</a>
          </li>
        </ul>
      </nav>
    </section>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <script></script>
</body>

</html>

How to Make a Vertical Line in Html