Skip to content

Instantly share code, notes, and snippets.

@gastonmorixe

gastonmorixe/index.html

Created August 7, 2017 20:08
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 gastonmorixe/347081baf34f958ead2da9c7e9a426bb to your computer and use it in GitHub Desktop.
Save gastonmorixe/347081baf34f958ead2da9c7e9a426bb to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin [add your bin description] // source https://jsbin.com/muzaru
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
$separationmargin: 10px;
$boxpadding: 10px;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p, div {
display: block;
background: yellow;
padding: $boxpadding;
}
p ~ p {
margin-top: $separationmargin;
}
p ~ p:before {
content: "";
position: absolute;
height: 0px;
left: 0;
right: 0;
display: block;
width: 100%;
border-top: 1px solid blue;
margin-top: -($boxpadding + ($separationmargin / 2));
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<!-- <div>div1</div> -->
<p>p4</p>
<!-- <div>div2</div> -->
<p>p4</p>
<!-- <div>div3</div> -->
<script id="jsbin-source-css" type="text/css">$separationmargin: 10px;
$boxpadding: 10px;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p, div {
display: block;
background: yellow;
padding: $boxpadding;
}
p ~ p {
margin-top: $separationmargin;
}
p ~ p:before {
content: "";
position: absolute;
height: 0px;
left: 0;
right: 0;
display: block;
width: 100%;
border-top: 1px solid blue;
margin-top: -($boxpadding + ($separationmargin / 2));
}</script>
</body>
</html>
Raw
jsbin.muzaru.css
$separationmargin: 10px;
$boxpadding: 10px;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p, div {
display: block;
background: yellow;
padding: $boxpadding;
}
p ~ p {
margin-top: $separationmargin;
}
p ~ p:before {
content: "";
position: absolute;
height: 0px;
left: 0;
right: 0;
display: block;
width: 100%;
border-top: 1px solid blue;
margin-top: -($boxpadding + ($separationmargin / 2));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment