Skip to content

Instantly share code, notes, and snippets.

@AlbinoDrought

AlbinoDrought/css_only_separators.html

Created July 29, 2016 21:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AlbinoDrought/1aa714790deafd985937e00ee7bb47e1 to your computer and use it in GitHub Desktop.
Save AlbinoDrought/1aa714790deafd985937e00ee7bb47e1 to your computer and use it in GitHub Desktop.
Download ZIP
Separate elements only if both are not empty, using only CSS
Raw
css_only_separators.html
<html>
<head>
<style type="text/css">
.s:not(:empty)+.s:not(:empty):before {
content: " / ";
}
</style>
</head>
<body>
<div>
<span class="s">ABC</span><span class="s">DEF</span>
</div>
<div>
<span class="s"></span><span class="s">DEF</span>
</div>
<div>
<span class="s">ABC</span><span class="s"></span>
</div>
</body>
</html>
@AlbinoDrought
Copy link
Author

Was refactoring some old code and noticed the "separator" generation logic seemed too complex. I knew there had to be an easier way.

This is spotty with more than two elements.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment