Make line with css

How to Style a Horizontal Line

A horizontal rule is commonly used as content or section divider. As a horizontal rule the element is used. Originally the

---

element was styled using attributes. Nowadays, in HTML5, the

---

element tells the browser that there is a paragraph-level thematic break. Let’s see how to style the

---

element with CSS below.

Change the size and position of a horizontal rule

The

---

element is styled with CSS rules instead of attributes. Change the width of the horizontal line by setting the width property and then center it using the margin property.

Example of changing the width and position of a horizontal rule:

html> html> head> title>Title of the document title> style> hr < width: 70%; margin-left: auto; margin-right: auto; > style> head> body> h1>Center Horizontal Line h1> hr /> body> html>

Result

If you want to change the thickness, or height of your horizontal line, add the height property to your

---

style. In this case, you can also set the background-color property for the thick horizontal line.

Example of changing the height and background color of the horizontal rule:

html> html> head> title>Title of the document title> style> hr < width: 100%; height: 30px; margin-left: auto; margin-right: auto; background-color: #b7d0e2; > style> head> body> h1>Horizontal Line with Height and Background Color h1> hr /> body> html>

Set the border property to «none» to remove the border of your thick horizontal line.

Example of adding a horizontal rule without a border:

html> html> head> title>Title of the document title> style> hr < width: 100%; height: 30px; margin-left: auto; margin-right: auto; background-color: #b7d0e2; border: 0 none; > style> head> body> h1>Horizontal Line with Height and Background Color h1> hr /> body> html>

You can change the color of the horizontal line by setting the border-top property and defining the color. Follow the example to see an illustration of it.

Example of adding a horizontal line with the border-top property:

html> html> head> title>Title of the document title> style> hr < border-top: 5px solid #095484; > style> head> body> h1>Horizontal Line with Height and Background Color h1> hr /> body> html>

Additional style for horizontal lines

Go further with horizontal lines by giving different styles to your

---

element’s border. Check the example code to see what stunning horizontal lines are presented.

Example of adding different styles to horizontal lines:

html> html> head> title>Title of the document title> style> .hr1 < border: 0; height: 3px; background: #095484; background-image: linear-gradient(to right, #ccc, #095484, #ccc); > .hr2 < border: 0; height: 3px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(9, 84, 132), rgba(0, 0, 0, 0)); > .hr3 < height: 15px; border: 0; box-shadow: inset 0 12px 12px -12px rgba(9, 84, 132); > .hr4 < border-top: 3px double #095484; > .hr5 < background-color: #fff; border-top: 2px dashed #095484; > .hr6 < border-top: 3px dotted #095484; > .hr7 < height: 30px; border-style: solid; border-color: #095484; border-width: 1px 0 0 0; border-radius: 20px; > .hr8 < display: block; content: ""; height: 30px; margin-top: -31px; border-style: solid; border-color: #095484; border-width: 0 0 1px 0; border-radius: 20px; > style> head> body> h3>Gradient Horizontal Line h3> hr class="hr1" /> h3>Gradient Transparent h3> hr class="hr2" /> h3>Single-direction Drop Shadow h3> hr class="hr3" /> h3>Double h3> hr class="hr4" /> h3>Dashed h3> hr class="hr5" /> h3>Dotted h3> hr class="hr6" /> h3>Rounded Corners h3> hr class="hr7" /> hr class="hr8" /> body> html>

Use a background image as a horizontal rule

If you want to set an ornament or image as a horizontal rule for your website, you can add a background image to your horizontal rule with the help of the CSS background property. Also, set the height equal to the height of your image (or how much part you want from the image), and border: none, so as your image will look like as a horizontal line.

Example of adding a background image as a horizontal line:

html> html> head> title>Title of the document title> style> .hr1 < height: 25px; background: url(/uploads/media/default/0001/01/e7a97bd9b2d25886cc7b9115de83b6b28b73b90b.jpeg) no-repeat center; border: none; > .hr2 < height: 25px; background: url(/uploads/media/default/0001/01/295e26d0bdf4d635c8887a6b0f37b61d7c69c5fc.png) no-repeat center; border: none; > .hr3 < height: 25px; background: url(/uploads/media/default/0001/01/09a69b0ad1525926a508356955843cf84306fd85.png) no-repeat center; border: none; > .hr4 < height: 20px; background: url(/uploads/media/default/0001/01/12fbe0b5b3d06c7e379d646068faa12f70452638.png) no-repeat center; border: none; > .hr5 < height: 50px; background: url(/uploads/media/default/0001/01/7d5f2a204567da4df1c1d7e5017d7b510ef56619.jpeg) no-repeat center; border: none; > .hr6 < height: 70px; background: url(/uploads/media/default/0001/01/fb69fe21cc880d96b3267efaa88cd72288a77fef.png) no-repeat center; border: none; > style> head> body> h1>Horizontal Lines with Images h1> hr class="hr1" /> br /> hr class="hr2" /> br /> hr class="hr3" /> br /> hr class="hr4" /> br /> hr class="hr5" /> hr class="hr6" /> body> html>

How to add attributes to a horizontal line across the page?

You can add attributes to a horizontal line in HTML by using the

---

tag and adding the desired attribute(s) as HTML attributes within the opening tag. Here is an example:

label="Horizontal line across the page">

In this example, we have added three attributes to the

---

element:

1. style: This attribute sets the inline style of the element. In this case, we have set the border property to create a solid black line. You can use any CSS property here to style the line as desired.
2. id: This attribute sets the unique identifier for the element. This can be used to target the element with JavaScript or CSS.
3. class: This attribute sets the CSS class(es) for the element. This can be used to apply common styles to multiple elements with the same class.
4. aria-label: This attribute is used to provide an accessible label for the element. It is read out loud by screen readers and is helpful for users who are visually impaired.

You can add any valid HTML attribute to the

---

tag in this way.

Источник

СSS стили для горизонтальных линий

Сборник горизонтальных линий с тегом

---

разных видов и стилей.

Сплошные линии

Двойная линия

Многострочная линия

Двухцветная линия

Трехцветная линия

Горизонтальный градиент

Вертикальный градиент

Линия с тенью

Замыленная линия

Линия «Полка»

Пунктирные линии

Пунктирная линия с фоном

Пунктирная линия с градиентом

Точечные линии

Линия из крупных точек

 
') 0 0 100% repeat; background-position: 50%; box-sizing: border-box; color: orange; > 

Разное

Вертикальные линии

Линии под углом

Наклонные линии

Комментарии 2

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

Подчеркивание текста можно сделать с помощью нескольких свойств CSS — background-image, background-size и.

Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.

Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет.

Источник

How to Add Horizontal Lines Before and After a Text in HTML

This article will guide you on how to add a horizontal line to the right and left side of a text as shown below:

1. Create an HTML text tag.

In your HTML file create an h2 tag and give it a class name of hr-lines

2. Adding the Left Line

We’ll make use of the CSS :before pseudo-element to add a line to the left side of the text. Apply the code below to your CSS file:

.hr-lines:before< content:" "; display: block; height: 2px; width: 130px; position: absolute; top: 50%; left: 0; background: red; > 

From the above code, we’re creating a new element with a height of 2px and width of 130px before the hr-lines element using the content property, then giving it an absolute position in order to move it around, we set the top to 50% to make it align with the text at the middle.

3. Set the hr-lines to relative

For the pseudo-elements to be applied to the target element, we must set the position of the element to a relative, this will make all the movement of the :before and :after be relative to the parent (text).

Add the following lines to your CSS files.

We can fix this by setting the max-width and adding margin to the element.

.hr-lines< position: relative; /* new lines */ max-width: 500px; margin: 100px auto; text-align: center; > 

We’re setting the :before to the left side of the text by setting the left:0 .

4. Adding the Right Line

We’ll make use of the :after pseudo-element to add the right line.

Add the following lines of code to your CSS file to add the right line to the text.

.hr-lines:after< content:" "; height: 2px; width: 130px; background: red; display: block; position: absolute; top: 50%; right: 0; > 

We’re setting the :after to the right side of the text by setting the right:0 .

Final Output:

The Complete Code

h2 class="hr-lines"> PEACE /h2> section> div> p>I wish for peace in Russia & Ukraine/p> /div> section> 

.hr-lines< position: relative; max-width: 500px; margin: 100px auto; text-align: center; > .hr-lines:before< content:" "; height: 2px; width: 130px; background: red; display: block; position: absolute; top: 50%; left: 0; > .hr-lines:after< content:" "; height: 2px; width: 130px; background: red; display: block; position: absolute; top: 50%; right: 0; > p< text-transform: uppercase; color: red; > section< display: flex; justify-content: center; align-items:center; gap: 1rem; > div< width: 500px; border: 1px solid #ccc; padding: 10px; height: 100px; display: flex; justify-content: center; align-items: center; line-height: 1.4; > 

Wrapping Up

I hope that this article will assist you in creating a text with horizontal right and left lines at some point in the future.

Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed and learned something new from this article, I will like to connect with you.

See you in the next article. Bye Bye 🙋‍♂️

If you found my content helpful and want to support my blog, you can also buy me a coffee below, my blog lives on coffee 🙏.

Did you find this article valuable?

Support Ayodele Samuel Adebayo by becoming a sponsor. Any amount is appreciated!

Источник

How to make dashed line using HTML and CSS

In this article, we will see how we can make a dashed line using HTML and CSS.

Here, we will make dashed line using < hr >and < div >tags with come help of CSS styling.

Method 1 : Using hr tag and CSS

Here, we will use the < hr >tag that creates a horizontal line. And then we will add a class name to it and use border property to create the dashed line.

body> hr class="dashed-line"> body> 

.dashed-line < border: 2px dashed red; > 

Here, we have added a class dashed-line and added a border of 2px dashed with the color red.

Method 2 : Using repeating-linear-gradient in CSS

We can also use the repeating-linear-gradient() function with the background CSS property to create a gradient line with dashed pattern on our HTML website.

The repeating-linear-gradient() function is used to create an image that repeats a linear gradient.

We can use this repeating gradient to create a dashed line in HTML.

background-image: repeating-linear-gradient( angle | to side-or-corner, color-stop1, color-stop2, . ); 

angle | to side-or-corner : degree and direction of the linear gradient.

color-stop : Color values with one or two stop positions (given in percentage or length along the gradient’s axis).

body> div class="line"> div> body> 

.line < margin: 5px 0; height: 5px; background: repeating-linear-gradient( to right, transparent, transparent 10px, black 10px, black 20px ); /*10px transparent then 10px black -> repeat this!*/ > 

In the code above, the transparent color is from 0 to 10px and the black color starts from 10px and stops at 20px. And since it’s repeating itself, it will create a dashed line on our html page.

Источник