css after before

                                    span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00F;
  cursor: help;
}

span[data-descr]:hover::after,
span[data-descr]:focus::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}

                                    /* for child  */

.custom_img:after {
    content: "";
    background-color: #2359cf;
    height: 400px;
    width: 70%;
    top: -15px;
    right: -6px;
    position: absolute;
    z-index: 999;
}

                                    /*
	"before" & "after" are pseudo-contents.
	They end up *into* the tag they are declared for.
	They are just right "before" or "after" the *content* of tag they're in.
	Declare their "content" CSS rule to make them visible.
*/
div::before			/* <div>|here|Content of tag</div> */
{
  content: "|here|";
}
div::after				/* <div>Content of tag|here|</div> */
{
  content: "|here|";
}

/*
	Double-colon should be used: it's the meant pseudo-content operator.
	IE8 doesn't support it though: it supports single-colon (meant for pseudo-selectors).
	So IE8 support needs the following:
	div:before { ... }
	div:after { ... }
*/

                                    p::before {
  content: "Read this: ";
}