What is the best way to make a vertical line using the CSS code provided in the link?

Question

What is the best way to make a vertical line using the CSS code provided in the link?

Check out this cool horizontal line design I found on stackoverflow:

Click here for CSS code to create the line

I really like the look of the line. Here's how I implemented it on my website:

hr.fancy-line { 
    border: 0; 
    height: 5px;

}
hr.fancy-line:before {
    top: -0.5em;
    height: 1em;
}
hr.fancy-line:after {
    content:'';
    height: 0.5em;
    top: 1px;
}

hr.fancy-line:before, hr.fancy-line:after {
    content: '';
    position: absolute;
    width: 100%;
}

hr.fancy-line, hr.fancy-line:before {
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
}

body, hr.fancy-line:after {
    background: #f4f4f4;
}

-Some Text-
<hr class="fancy-line"></hr>

Now, I'm curious about creating vertical lines using a similar concept. If you're interested in seeing how I used the horizontal lines on my site, check out this link.

javascript jquery html css

Answer 1

Answer №1

My approach was to style the element with a slim width and an elongated height.

Yet, crafting a vertical line using an <hr> tag may lack semantic meaning, so it could be more appropriate to utilize a <span> or another suitable element.

body {
  background: #f4f4f4;
}
hr.fancy-line {
  border: 0;
  height: 180px;
  width: 5px;
  margin: 0 auto;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}

<hr class="fancy-line"></hr>

The method for creating these lines should align with the specific context in which they are used. For instance, if the lines are intended to separate elements on a page, a possible solution is to generate them as pseudo-elements, as shown below:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul li {
  position: relative;
  display: inline-block;
  width: 180px;
  height: 180px;
  background-color: #CCC;
}
ul li:not(:last-child) {
  margin: 0 1em 0 0;
}
ul li:not(:last-child):after {
  content: "";
  position: absolute;
  left: 100%;
  margin-left: .5em;
  height: 100%;
  width: 4px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

Answer 2

My approach was to style the element with a slim width and an elongated height.

Yet, crafting a vertical line using an <hr> tag may lack semantic meaning, so it could be more appropriate to utilize a <span> or another suitable element.

body {
  background: #f4f4f4;
}
hr.fancy-line {
  border: 0;
  height: 180px;
  width: 5px;
  margin: 0 auto;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}

<hr class="fancy-line"></hr>

The method for creating these lines should align with the specific context in which they are used. For instance, if the lines are intended to separate elements on a page, a possible solution is to generate them as pseudo-elements, as shown below:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul li {
  position: relative;
  display: inline-block;
  width: 180px;
  height: 180px;
  background-color: #CCC;
}
ul li:not(:last-child) {
  margin: 0 1em 0 0;
}
ul li:not(:last-child):after {
  content: "";
  position: absolute;
  left: 100%;
  margin-left: .5em;
  height: 100%;
  width: 4px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

Answer 3

Answer №2

The horizontal line you are observing is displayed because web browsers interpret the <hr> (horizontal ruler) elements in this way as defined by the HTML specification.

Unfortunately, there is no <vr> element or equivalent in HTML, so an alternative approach would need to be devised for that specific function.

Answer 4

The horizontal line you are observing is displayed because web browsers interpret the <hr> (horizontal ruler) elements in this way as defined by the HTML specification.

Unfortunately, there is no <vr> element or equivalent in HTML, so an alternative approach would need to be devised for that specific function.

Answer 5

Answer №3

To enhance the design of your website, consider adding a stylish border to the left or right side of a division element that encompasses all content within your webpage (or adjust the height property to 100%).

Answer 6

To enhance the design of your website, consider adding a stylish border to the left or right side of a division element that encompasses all content within your webpage (or adjust the height property to 100%).

Answer 7

Answer №4

To achieve a 90-degree rotation of the hr, you can use the following CSS:

hr.fancy-line {
  transform: rotate(90deg);
}

hr.fancy-line { 
    border: 0; 
    height: 5px;

}
hr.fancy-line:before {
    top: -0.5em;
    height: 1em;
}
hr.fancy-line:after {
    content:'';
    height: 0.5em;
    top: 1px;
}

hr.fancy-line:before, hr.fancy-line:after {
    content: '';
    position: absolute;
    width: 100%;
}

hr.fancy-line, hr.fancy-line:before {
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
}

hr.fancy-line {
  transform: rotate(90deg);
}

body, hr.fancy-line:after {
    background: #f4f4f4;
}

-Modified Content-
<hr class="fancy-line"></hr>

Answer 8

To achieve a 90-degree rotation of the hr, you can use the following CSS:

hr.fancy-line {
  transform: rotate(90deg);
}

hr.fancy-line { 
    border: 0; 
    height: 5px;

}
hr.fancy-line:before {
    top: -0.5em;
    height: 1em;
}
hr.fancy-line:after {
    content:'';
    height: 0.5em;
    top: 1px;
}

hr.fancy-line:before, hr.fancy-line:after {
    content: '';
    position: absolute;
    width: 100%;
}

hr.fancy-line, hr.fancy-line:before {
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
}

hr.fancy-line {
  transform: rotate(90deg);
}

body, hr.fancy-line:after {
    background: #f4f4f4;
}

-Modified Content-
<hr class="fancy-line"></hr>

Answer 9

Answer №5

To create a vertical divider in HTML, you have three choices:

If you want to ensure compatibility with older browsers, use the following CSS code:

 hr {
    display: inline-block;
 }

For modern browsers, you can simply rotate the divider using the transform property:

hr {
    transform: rotate(90deg);
 }

Alternatively, you can set a small width and large height for the horizontal ruler:

hr {
   width: 5px;
   height: 200px;
}

Answer 10

To create a vertical divider in HTML, you have three choices:

If you want to ensure compatibility with older browsers, use the following CSS code:

 hr {
    display: inline-block;
 }

For modern browsers, you can simply rotate the divider using the transform property:

hr {
    transform: rotate(90deg);
 }

Alternatively, you can set a small width and large height for the horizontal ruler:

hr {
   width: 5px;
   height: 200px;
}

Answer 11

Answer №6

Shoutout to @showdev and @Cayce K.

I finally found what I've been searching for.

For those interested in something similar in the future, here's the code:

body {
  background: #f4f4f4;
}
hr.fancy-line {
  border: 0;
  margin: 0 auto;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}

<hr class="fancy-line" style="height: 100px; width: 5px;"></hr>

I adjusted the height and width in the html line to create vertical lines of varying dimensions on different pages.

Big thanks to everyone else who helped out. This was my very first question on stackoverflow, and I'm thrilled with the responses. Cheers!

Answer 12

Shoutout to @showdev and @Cayce K.

I finally found what I've been searching for.

For those interested in something similar in the future, here's the code:

body {
  background: #f4f4f4;
}
hr.fancy-line {
  border: 0;
  margin: 0 auto;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}

<hr class="fancy-line" style="height: 100px; width: 5px;"></hr>

I adjusted the height and width in the html line to create vertical lines of varying dimensions on different pages.

Big thanks to everyone else who helped out. This was my very first question on stackoverflow, and I'm thrilled with the responses. Cheers!

What is the best way to make a vertical line using the CSS code provided in the link?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Enlarge the image to fill the entire screen

Navigating Through the DOM with Selenium using XPath Axes

What is the process of converting the string 'dd/mm/yy hh:MM:ss' into a Date format using javascript?

What is the Best Way to Implement a Three-Column Layout on a Website with Bootstrap?

Identify the moment a dialogue box appears using jQuery

The peculiar behavior of Google Maps markers refreshing inconsistently upon bounds adjustment

Error: "Access-Control-Allow-Origin" header is missing in Firebase Function

Having trouble with Angular2's Maximum Call Stack Exceeded error when trying to display images?

Javascript is not fetching the value

What is causing the error message stating that the DateTime class object cannot be converted to a string?

Unable to locate the value property of a null object

Static response is the way to go! Asynchronous responses just don't cut it

Is fs-extra the best tool for working with a .bundle file?

Selected Angular Radio Button

Decrease the gap between rows in CSS Grid

Advanced Techniques: Leveraging Master Layouts, Partial Rendering, and JavaScript Function

What is causing the error message 'undefined is not a function' to appear in my code?

Using varied colors to style list items

The scale line on the OpenLayers map displays the same metrics twice, even when the zoom level is different

Customizing the Zoom Control Style in Vue Leaflet