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

supminn profile image

Decoding StyleX: Meta's Cutting-Edge Styling System

Supriya M -

windui profile image

New Feed Component Variations 🚀

Wind UI -

nnnirajn profile image

10 CSS Tricks for UI developers

Niraj Narkhede -

tomasdevs profile image

Why I Built the "Soo Good" Vegan Burger Website 🌱

Tomas Stveracek -