Archived topic
Possible to create a line like this using CSS?
3 replies · Started by William on September 18, 2021
Hello -
Is there CSS I can utilize to create a line similar to what theverge.com uses?
Example in this article https://www.theverge.com/2021/9/17/22680372/elizabeth-holmes-wire-fraud-emails-gangakhedkar,
Another example here:
https://imgur.com/1gEQMJ5
Any help would be appreciated! I'd be looking to add this style to headings, quotes etc.
Hi William,
The example site is using this css:
.c-entry-group-labels__item:before {
border-right: 1px solid;
border-top: 1px solid;
}
.c-entry-group-labels__item:before {
background: transparent;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
-webkit-transform: skewX(
25deg);
transform: skewX(
25deg);
width: 100%;
z-index: -1;
}You just need to replace the .c-entry-group-labels__item with your own CSS selectors.
Thank you, Ying!
Can I just make up my own CSS selector? Does it matter what I call it?
Hi William,
It has to match the class of the element for the line to apply.
Say, for example, the element you want to apply this on has an attribute class="post-meta".
You'll have to change .c-entry-group-labels__item with .post-meta.
