DEV Community

Spruce Emmanuel
Spruce Emmanuel

Posted on

How to create 5 Cool css only Line effects

#css #html

Lines are always a great way to design our web pages, and lines ain't meant to be boring


//Html
<div class="line"></div>

// Css
.line {
 border-bottom: 2px solid #ccc; // lines shouldn't be this boring
}



5 css only line effect

Adding line to a text

line added to header text from smashingmagazine

line added to header text from smashingmagazine

Ever wanted to create something like that? 😊

What if I told you that this can easily be achieved with a few lines of 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%
}

And there you have, as simple as that...

Other cool css only Line effects

Highlight Text

Add line to both side of an Element

Css only Wavy line

Animate line on hover

This article was originally written here, Find me online here

Top comments (3)

Collapse
 
gilfewster profile image
Gil Fewster •

Nice effect.

If you're interested, here's another way to accomplish the effect without requiring the wrapper elements, so you can just add the line-before class to any block text element (paragraph, headings, etc).

<!-- html -->
<h2 class="line-before">This is a headline</h2>

<p class="line-before">Hello. This is a paragraph</p>
Enter fullscreen mode Exit fullscreen mode 
/* css */
.line-before {
  position: relative;
  padding-left: 110px;
}

.line-before:before {
  position: absolute;
  content: "";
  width: 100px;
  height: 1px;
  left: 0;
  top: calc(50% + 1px);
  background-color: black;
}
Enter fullscreen mode Exit fullscreen mode

When you attach the line-before class to a multiline text block using the css above, the entire text block will be indented, and the line will be positioned at 50% of the text block's full height.

You could also tweak the CSS so that only the first line of a multiline text block will be indented:

/* css */

.line-before {
  position: relative;
}

.line-before::first-line {
  text-indent: 110px;
}

.line-before:before {
  position: absolute;
  content: "";
  width: 100px;
  height: 1px;
  left: 0;
  top: calc(.5em + 1px);
  background-color: black;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
spruceemma profile image
Spruce Emmanuel •

Wow.. Thanks
Why didn't I think of this
I'll definitely update this on the original article...
Thanks

Collapse
 
gilfewster profile image
Gil Fewster •

No worries, glad it was helpful. I have a bit of an obsession with keeping my html as sparse as possible. Modern CSS can accomplish an incredible amount with very minimal tags to hook onto.

Read next

mike_andreuzza profile image

How to use the HTML output tag for displaying the result of a calculation.

Michael Andreuzza -

ashcodebd profile image

Building a product landing page

Ashraf Mahmood -

alvaromontoro profile image

Bad CSS-Dad Jokes (III)

Alvaro Montoro -

tailwine profile image

Advanced SCSS: Function and Mixins

Tailwine -