Skip to content

Instantly share code, notes, and snippets.

@osnr

osnr/cssresize.html

Created December 1, 2020 16:38
Show Gist options
  • Save osnr/695a5a14961528f167e5a475fc825176 to your computer and use it in GitHub Desktop.
Save osnr/695a5a14961528f167e5a475fc825176 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
cssresize.html
<html>
<head>
</head>
<body>
<style>
style { display: block; white-space: pre; font-family: monospace; }
div { background: blue; overflow: hidden; resize: horizontal; }
div::before { content: attr(style); }
div::before { font: 2em Helvetica, sans-serif; color: white; }
div[style^="width: 1"]::before { content: 'OTHER WAY ->'; }
div[style^="width: 2"]::before { content: 'resize me! ->'; }
div[style^="width: 3"]::before { content: 'hello'; }
div[style^="width: 4"]::before { content: 'this'; }
div[style^="width: 5"]::before { content: 'is'; }
div[style^="width: 6"]::before { content: 'cool'; }
</style>
<div style="width: 200px"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment