:before y :after en elementos HTML

Ejemplo

ola ke ase

o ke ase

   article {
      position: relative; 
      background: linear-gradient(to right, #bdc3c7, #2c3e50);
      border:1px solid #ddd; 
      padding:4rem 2rem;
      text-align:center;
   }
   .icono {
      content: "";
      width: 8rem; 
      height: 3.38rem; 
      display:inline-block;
      border: 3px solid #fff; 
      border-radius: 2rem; 
      background:#32323a;
      position:relative;
   }
   .icono:after {
      content: "+";
      position: absolute;
      height: 3.5rem;
      width: 3.5rem;
      font-size: 3.5rem;
      font-weight: 900;
      color:white;
      font-family:sans-serif;
      top:-25%;
      left:54%;
   }
   .icono:before {
      content: "";
      height: 3.35rem;
      display: inline-block;
      width: 3.35rem;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 2rem;
      background: red url(ese-del-siglo.svg);
   }

p u b l i c i d a d

en el recuadro gris debería aparecer una publicidad, pero aún si no fuese así, se debe desplazar con el scroll, durante el área contenedora -- publicidad sticky.