DEV Community

Berra
Berra

Posted on • Edited on

Tiny css separator

Ever had a case where you want to separate some test with a special character. But maybe some content is dynamic. And if not the first is visible - then the separator would be out of place - right?

This is a little solution I came up with in css using data attributes, empty selector and sibling selectors.

*:not(:empty) + [data-before]:before {
  content: " " attr(data-before) " ";
}
Enter fullscreen mode Exit fullscreen mode

Use like this

Use it like this with some conditional JSX syntax.

<p>
  {tags && <span>{tags}</span>}
  {date && <span data-before="-">{date}</span>}
</p>
Enter fullscreen mode Exit fullscreen mode

This would output Tagname - May 4:th 2023 if tags is available. And May 4:th 2023 when no tags are available.

How it works

From left to right top to bottom. The star * selector looks at every element. And then the :not(:empty) will take any element that has content inside. That is not empty! Then we have the + that will select the very next element after that. That element must have a data-before attribute. And then we add the :before pseudo element. In that before element we add content with spaces before and after and the content from the data attribute data-before.

Hope this was useful or educational or something like that.

Until next time, Cheers!

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay