How to create 5 Cool css only Line effects

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

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

Comments

[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>

/* 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;
}

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;
}

[Spruce]

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

[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.