How to Create Vertical Line in HTML
You might have a couple of reasons to create a vertical line on your web page but HTML does not have any element for vertical lines. Although HTML only have the element for a horizontal line; but still there are multiple ways to create a vertical line in HTML as mentioned below:
- Using Border CSS Property
- Using width and height CSS Property
- Using hr Transform Property
Here in this article, we have explained all possible ways to create Vertical line in HTML:
1) Using Border-Right, Height and Position CSS Property
OUTPUT
2) Vertical line using Border-Left, Height, and Position CSS Property
3) Vertical line using hr Transform Property
A vertical line can be created in HTML using transform property in <hr> tag. With the help of this property, you can rotate a horizontal line to a vertical line.
How to create a vertical line using HTML and CSS
To create a vertical line using HTML and CSS, you can set a CSS rule for <hr> tags with the class vertical as follows:
First, you need to normalize the default border and margin properties added by the browser.
Next, the width, style, and color of the vertical line is set using the shorthand border-left property, while the height property will set the height of the vertical line.
The float:left property is added so that the vertical line can be displayed on the left side of another element.
The following HTML markup:
Will produce the following output:
Alternatively, you can also remove the <hr> tag and create a vertical line by adding a border-left or border-right property to any element that you want to have a vertical line.
For example, here’s how to add a vertical line on the right side of the <p> tag:
The example below:
Will produce the following output:
You will need to adjust the CSS style depending on the context and where you want to place the vertical line. But a vertical line can always be created using the <hr> tag.
If you need to add the vertical line on the side of another element, you can use either the border-left or border-right property with the attached element.
Level up your programming skills
I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!
report this ad
About
Sebhastian is a site that makes learning programming easy with its step-by-step, beginner-friendly tutorials.
Learn JavaScript and other programming languages with clear examples.
Free Code Snippets Book
Get my FREE code snippets Book to 10x your productivity here
report this ad
How to draw vertical and diagonal lines with HTML and CSS
As someone just starting out with HTML and CSS there are a few things (to say the least) that can immediately perplex. For me it was vertical lines. Wanna make a horizontal line? Cool. Throw in an <hr> tag and you're good to go. Wanna make a vertical line? Logic would dictate you throw in a <vr> tag and you're good to go. Wait, no?
Now we have to get a little creative. I'll share three methods for making vertical lines (and diagonal too just for fun ☺).
Rotating a Horizontal line
The first method is to take a horizontal line and use the transform property to rotate it. For a vertical line you would rotate it 90 degrees.
Slightly confusingly, in order to change the height of the line, you'll need to change the width property because after all, this is just a horizontal line turned on it’s side.
The fun thing though, is that you can turn it into a diagonal just by changing the degree of rotation!
To move the line around the page you can add the parameters translateX and translateY to the transform property. This will move the line along the X and Y axis respectively.
A <div> with a width of 1px
The next method is to create a <div> that has the width of 1px (or more depending on how thick you’d like the line). For this method you'll have to specify a class on the <div> so as not to confuse the styling with other <div>s on your page
This may seem a little less intuitive that just rotating a horizontal line, but the benefit is that in order to change the height, you change the height property and don’t have to bend your mind every time you want to modify it a little. Another benefit is that you can make the line as thick as you would like by adjusting the width property.
But don't forget to add a background colour or border-left or border-right colour or you'll be wondering why you can't see the line ;).
The transform property works the same way as in the previous method to make diagonal lines as well.
Border-Left/Right on an existing <div>
One way to make your life a little easier is to use what’s already there. For instance, if you like to put vertical lines between text and you already have some paragraphs floating next to each other, you could just put a border-right property and voila! a vertical line separating the text. This saves you making extra <div>s for each line.
The above code will result in the following vertical lines.
You might be thinking “but I only wanted lines between the text, this method isn't going to work for me”. But wait, there’s more!
By simply adding a <div> around the paragraphs and adding a last:child pseudo selector with no border you’re problems are solved.
Как сделать вертикальную линию HTML?
В продолжение темы оформления контента на станицах сайта сегодня я хочу вам показать, как можно добавить вертикальную линию HTML, и тем самым выделить фрагмент текста, сделав его более заметным для посетителей.
Для того, что бы сделать вертикальную линию HTML есть несколько способов, но в зависимости от браузера у вас могут возникнуть проблемы с ее отображением на странице. Поэтому я покажу вам два наиболее простых способа добавления вертикальной линии HTML, которые будут у вас на 100% работать.
Навигация по статье:
Вертикальная линия HTML
В первом случае нам нужно обернуть предназначенный для выделения фрагмент текста или элемент на странице в тег <div>, или же использовать уже существующий блок, и для этого блока задать границу с нужной стороны.
Можно дописать стили в самом теге:
Вертикальная линия HTML
С помощью свойства border-left мы задаем границу блока с левой стороны, и задаем следующие параметры границы:
- 3px – толщина линии
- solid – сплошная линия.Так же можно сделать: пунктирную(dotted), прерывистую (dashed), double (двойную), вогнутую (groove), и выпуклую (ridge).
- red – это цвет границы. Его вы можете задать названием цвета, в шестнадцатеричном формате, с помощью таблицы цветов RGB или RGBA.
Для задания границы вы можете использовать следующие свойства:
- border-left – граница слева
- border-right— граница справа
- border-top – сверху
- border-bottom – снизу
- border – граница по всему контуру блока
Так же нам нужно указать отступ текста от границы с помощью свойства padding-left, иначе он будет к ней прилипать. В моем случае отступ равен 10 пикселям.
Если вам удобнее работать с CSS стилями в отдельном файле, то для блока нужно присвоить класс и для этого класса прописать данные свойства в CSS -файле. Вот как это будет выглядеть:
HTML:
CSS:
Вертикальная линия HTML для текста в блоке
Вертикальная линия HTML с помощью псевдоэлемента
Если вам удобнее работать с CSS -стилями, то вы можете воспользоваться еще одним способом добавления вертикальных линий. Данный вариант немного сложнее и заключается в использовании псевдоэлементов :before и :after. Но у псевдоэлементов есть один очень ощутимый плюс, они позволяют без добавления HTML-кода, разместить на станице, соответственно, перед блоком или после него дополнительный элемент.
Тема псевдоэлементов достаточно обширна, поэтому подробно вдаваться их описание я сейчас не буду. В ближайшее время постараюсь подготовить статью с более подробной информацией по наиболее полезным псевдоэлементам, их возможностям и применению.
Итак, если нам нужно разместить вертикальную или горизонтальную линию сверху или слевой стороны элемента, то нам нужно использовать псевдоэлемент :before. Если же линия должна быть справа или снизу, то мы должны использовать псевдоэлемент :after.