DEV Community

Discussion on: How to create 5 Cool css only Line effects

View post
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
 
iamspruce profile image
Spruce •

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.