When we talk about css lines we shouldn't always think about ordinary "one way straight lines"

Lines can be used to style up our web pages in a lot of ways. That is, just 5 effects are just a few things you could do with Lines

What would make this effects fun is that you only get to use CSS, no images are used here

Note: Some of this effect can be achieved using images too

Css only Line effects

1. Highlight Text
2. Lines on both side of an Element
3. Css Wavy line
4. Line Hover Effect
5. Add line in the middle of a word

Let's jump right into actually creating this stuff

Highlight Text

Now you might be surprised how easy it is to highlight a whole paragraph of text with one line of css...

// HTML code
<p class="highlight-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. At nam dignissimos nemo nihil iure illo nisi nobis voluptatum sit architecto reprehenderit, quibusdam molestiae, sunt, distinctio ea vero? Error, minus excepturi?
<p>
// Css
// Only trick here is to make sure the element is inline
.highlight-text {
display: inline; // enforce inline
background: linear-gradient(180deg, rgba(225,225,225,0) 50%, #00bb00 50%);
}

And that's it, preview should look like this

Lorem ipsum dolor sit amet consectetur adipisicing elit. At nam dignissimos nemo nihil iure illo nisi nobis voluptatum sit architecto reprehenderit, quibusdam molestiae, sunt, distinctio ea vero? Error, minus excepturi?

Lines on both side of an Element

You might be wondering, how do I place lines on both side of an Element in the most less messy way. It's actually kind of a breeze with css LINEAR-GRADIENT

// HTML code
<div class="lines">
<input type="submit" class="btn btn--small btn--primary" value="button">
</div>

// Css 

.lines {
 text-align: center;
 background-image: linear-gradient(#ddd,#ddd);
 background-size: 100% .1em;
 background-repeat: no-repeat;
 background-position: center center;
 margin: 2em 0;
}
.llines .btn
 {
 display:inline-block;
 box-shadow:0 0 0 1em #fff;
} 

that's it, the preview should look like this

Css Wavy lines

With just a single div you can create a Wavy effect with pure css

 // HTML code
 <div class="wavy-line"><div>

// Css

.wavy-line {
    position: relative;
    width: 100vw;
    height: 50px;
}
.wavy-line::before, .line::after {
    content: "";
    display: block;
    position: absolute;
    width: 100vw; /*same width as container*/
    height: 26px;
}
.wavy-line::after {
    background: linear-gradient(45deg, transparent, transparent 49%, green 49%, transparent 51%);
}
.wavy-line::before {
    background: linear-gradient(-45deg, transparent, transparent 49%, green 49%, transparent 51%);
}
.wavy-line::before, .line::after {
    background-size: 50px 50px;
}

There you go, and the preview should look like the one below

Animate line on hover

Another cool thing you can do with css lines is animating them....

 // HTML code
     <a href="#0" class="line-animate">
        hover me
    </a>

// Css

.line-animate {
    display: inline-block;
    text-decoration: none;
    font-size: 26px;
    color: green;
    position: relative;
}
.line-animate:hover.line-animate::after {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    position: absolute;
    top: 100%;
    background-image: linear-gradient(#ddd,#ddd);
    background-size: 100% .1em;
    animation: animate .5s linear;

}

@keyframes animate {
    0% {
        width: 0;
    }
    50% {
        width: 100%;
    }
    0% {
        width: 0;
    }
}

And there you have it, a cool hover line effect created with css

Add line in the middle of a word

Have you ever wanted create a header text like the one below?

What if I told you it is quite easy to do with CSS

 // HTML code
   <div class="line-before">
     <span class="line-before__inner">
     Latest posts
    </span>
    </div>

// Css 
.line-before__inner {
 position:relative;
 display:block;
 width:100%;
 color:#333;
 background-position:center;
 z-index:2;
 padding-left:calc(100px + 1em);
}

.line-before__inner::before {
 content:'';
 position:absolute;
 display:block;
 width:100px;
 height:1px;
 background-color:currentColor;
 left:0;
 top:50%
} 

The CSS above is self explanatory, so that's how to add a line in the middle of a text item

Thanks for reading