:Before and :After elements

Demo to show how to embellish and element without changing the DOM.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>:Before and :After elements</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class='block'></div>
<div class='block special'>
  <h1>Using :before and :after to embellish an element</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus ante et mi faucibus, sit amet ultricies risus tincidunt. Nunc vel nunc quis enim feugiat varius ac nec nisl. Mauris tempor nisi a aliquet laoreet. Nam semper malesuada enim condimentum mattis. Cras hendrerit ipsum in eleifend scelerisque. Fusce iaculis malesuada augue, vitae viverra elit venenatis eget. Aenean fringilla vitae eros ut elementum. Suspendisse euismod ipsum et mauris cursus, quis congue quam placerat. Pellentesque vestibulum enim dictum, scelerisque felis non, rhoncus leo.</p><p>Aliquam sed auctor tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque semper non dui id posuere. Quisque bibendum feugiat massa, eget auctor nibh lacinia feugiat. Donec enim sem, blandit ac augue facilisis, adipiscing molestie nibh. Aliquam eget nisl elementum, eleifend arcu eget, ultrices arcu.</p>
</div>
<div class='block'></div>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
.block {
  background:#eee;
  padding:10px;
  border:1px solid #ff0000;
  min-height:100px;
  position:relative;
  overflow:visible;
}

.block.special {
  background:#333;
  min-height:200px;
  padding-bottom:50px;
  color:#fff;
}
.block.special:before {
  border:1px solid #ff0000;
  background:#ffcc00;
  width:100px;
  height:100px;
  display:block;
  position:absolute;
  z-index:100;
  top: -50px;
  right: 10px;
  content: '';
  background: url(https://g.twimg.com/Twitter_logo_blue.png) no-repeat;
  background-size:contain;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='https://g.twimg.com/Twitter_logo_blue.png',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='https://g.twimg.com/Twitter_logo_blue.png',
sizingMethod='scale')";
}

.block.special:after {
  background:#ffcc00;
  width:100px;
  height:100px;
  display:block;
  position:absolute;
  z-index:100;
  bottom: -50px;
  left: 10px;
  content: '';
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
  background: #ffcc00 url(https://g.twimg.com/Twitter_logo_blue.png) no-repeat;
  background-size:contain;
  z-index:166;
  border:1px solid #ff0000;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( :Before and :After elements ) is write by Alastair Maclean, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Alastair Maclean