How To Draw A Line In Css Html

In this short article we'll explore drawing decorative lines with CSS using Pseudo Elements, Background Images, and SVG. Afterward reading you'll have learned a couple of interesting techniques for drawing department separators or other decorative line elements with CSS.

Pseudo elements

We can generate a pseudo-chemical element using the ::earlier or ::subsequently selectors. This adds a new child to our targeted chemical element that we tin then manner as if information technology was a normal element.

To get the browser to return the pseudo-element nosotros demand to set the content belongings.

                      .my-element::before            {            content            :            "I'm a pseudo-chemical element!"            ;            background            :            pink;            padding            :            0.25rem;            }

The upshot:

Now to create a decorative line we position our pseudo-element inside the element we want to draw a line in.

In the demos below I've centered the text and given the chemical element a height so nosotros tin clearly come across the horizontal line running behind the text, annotation that these properties are non shown in the example CSS.

                      .my-element            {            position            :            relative;            z-index            :            0;            }            .my-element::before            {            /* we want to describe a line, then no content needed */            content            :            ''            ;            /* this sets the position and size of the pseudo-chemical element */            position            :            absolute;            top            :            50%;            width            :            100%;            height            :            2px;            groundwork-colour            :            pink;            /* draw behind child elements */            z-index            :            -one;            }

The result:

The .my-element node

This method gives us a lot of flexibility but uses absolute positioning which requires the parent element to have relative positioning. This is considering an element with position absolute is positioned relative to the first parent element plant that has positioning explicitely set to relative.

This works pretty well but can cause issues when other kid elements have z-indexes applied or want to be positioned relative to an element further up in the DOM tree.

We can avoid the positioning issue by using a edge like this.

                      .my-element            {            box-shadow            :            inset 0 0 0 1px #777;            colour            :            #777;            }            .my-element::before            {            content            :            ''            ;            display            :            block;            padding-height            :            ii.5rem;            margin-lesser            :            -ii.5rem;            border-lesser            :            2px solid pinkish;            }

The effect:

The .my-chemical element node

Yet it feels a bit like a hack to create an chemical element to draw a line and now we demand to know the acme of the parent element.

Background images

We can use linear-slope, radial-gradient, and conic-gradient to "generate" background images. Combined with background-size, background-position, and background-echo nosotros can use these gradients to "cheat" and draw a unproblematic line.

                      .my-element            {            background-image            :            linear-slope            (pinkish,            pink)            ;            background-echo            :            no-repeat;            groundwork-size            :            100% 1px;            background-position            :            0 center;            }

The issue:

The .my-element node

This is a lot cleaner already, we can make this fifty-fifty amend by creating a separate decorative-line class and defining a couple CSS properties.

                                                    <p              class                              =                "my-element decorative-line"                            >            Hello!                              </p              >

                      .decorative-line            {            groundwork-image            :            linear-gradient            (            var            (--line-color)            ,            var            (--line-color)            )            ;            background-repeat            :            no-repeat;            background-size            :            100%            var            (--line-height)            ;            background-position            :            0 center;            }            .my-chemical element            {            --line-color            :            pink;            --line-peak            :            2px;            }

Now we can utilise the decorative-line class to an element and set the --line-colour and --line-top properties to fashion it.

Nosotros tin now also fade-in and fade-out lines.

                      .my-element            {            background-epitome            :            linear-gradient            (            to right,            pink,            white 35%,            white 65%,            pink            )            ;            background-repeat            :            no-repeat;            background-size            :            100% 2px;            groundwork-position            :            0 center;            }

The consequence:

The .my-chemical element node

We can all the same gear up a background color and have multiple other background images on the target element.

                      .my-element            {            background-colour            :            lavenderblush;            background-image            :            linear-slope            (pink,            pinkish)            ,            linear-gradient            (palevioletred,            palevioletred)            ;            background-size            :            100% 2px,            2px 100%;            background-position            :            0 middle,            25% 0;            background-echo            :            no-repeat;            }

The issue:

The .my-element node

SVG data URIs

Nosotros tin can too set up groundwork images using SVGs but unfortunately we cannot use CSS variables within the SVG data URI.

                      .my-element            {            background-epitome            :                          url              (              'information:image/svg+xml,\     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 100%">\       <rect x="0" y="l%" width="100%" height="2px" fill="pink"/>\     </svg>'              )                        ;            }

The result:

The .my-element node

I haven't tested this but I suspect using SVGs is slower than linear-gradient equally it requires the browser to decode and draw the SVG. even so SVG is very powerful and then might be the way to go if you need to draw very exotic lines.

Determination

There's multiple ways we can describe decorative lines with CSS. We found pseudo elements give us a lot of flexibility only also crave positioning that could innovate side furnishings.

Using generated groundwork images instead can be a prissy work around and doesn't introduce the positioning problems that pseudo-elements can crusade.

SVGs are as well a nice alternative simply can't be styled with CSS Custom Properties and might be a flake slower than linear gradients.