:Before and :After elements

In this example below you will see how to do a :Before and :After elements with some HTML / CSS and Javascript

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

Thumbnail
This awesome code was written by amaclean, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright amaclean ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<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/amaclean/before-and-after-elements-AakBp */
.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;
}

Comments