#block {
width: 200px; height: 50px; background-color: #fff; text-align: center; line-height: 50px; overflow: hidden; position: relative;
&::before {
display: block; content: ""; position: absolute; bottom: -12px; right: 5px; left: 5px; height: 1px;
-webkit-box-shadow: 0 -10px 5px blue;
-moz-box-shadow: 0 -10px 5px blue;
box-shadow: 0 -10px 5px blue;
}
&::after {
display: block; content: ""; position: absolute; top: -12px; right: 5px; left: 5px; height: 1px;
-webkit-box-shadow: 0 10px 5px blue;
-moz-box-shadow: 0 10px 5px blue;
box-shadow: 0 10px 5px blue;
}
}
.someClass { postiotion: relative;}
.someClass::before {
position: absolute; display: block; content: ""; width: 8px; height: 8px; background-color: red; border-radius: 4px; top: 50%; left: 0; margin-top: -4px;
}
<style>
.clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden;}
.clearfix { display: inline-block;}
* html .clearfix { height: 1%;}
.clearfix { display: block;}
.wrapper { margin-right: 220px;}
.wrapper .col_left { float: left; background: green; width: 100%;}
.wrapper .col_right { float: right; position: relative; width: 200px; margin-right: -220px; background: red;}
</style>
<div class="wrapper clearfix">
<div class="col_left">col_left</div>
<div class="col_right">col_right</div>
</div>