Geek Answers Handbook

How to create a vertical line using css code in this link?

Here is a link to another question about stackoverflow.

Css code to create a horizontal line

I like the line created. Here is the code that I use for horizontal lines on my site:

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 want to know: how to change this code so that I can create vertical lines. Here is the link in which I used the above code to create horizontal lines: Horizontal lines used

+4
source share
6 answers

I styled an element with a narrow width and high height.

However, creating a vertical line from <hr> does not seem semantic, so you can use <span> or some other 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 way you implement strings depends on the context in which you use them. For example, if the lines will separate the elements on the page, you can create them as pseudo-elements, for example, 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>
+3
source

The reason you see the horizontal line is because visual web browsers handle <hr> elements (horizontal ruler). The way the HTML specification defines this element.

There is no <vr> element or equivalent in HTML, so you will need something completely different for this.

+1
source

You can rotate hr 90 degrees as follows:

 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; } 
 -Some Text- <hr class="fancy-line"></hr>
0
source

You can create a left or right border for the div that surrounds everything in your body (or has the height element set to 100% ).

0
source

You have three options if you want to do vertical hr.

If you need to support older browsers:

  hr { display: inline-block; }

If you only need support for new browsers, use:

 hr { transform: rotate(90deg); }

Set a small width and a large height:

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

Thanks to @showdev and @Cayce K.

I now have what I was looking for.

Let me put the code here for those who want to do something similar in the future.

 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 moved the height and width to the html line, so I would insert vertical lines of different heights and widths on different pages.

Thanks to everyone who contributed. This was literally my first question on stackoverflow. Delighted with the answer. Greetings

0
source

More articles:


All Articles