CSS

css before

.parent-div {
   position: relative;
   width: 100px;
   height: 100px;
   background: #ffffff;
   border: 1px solid #000000;
}
.div:before {
  content: "";
  width: 20px;
  height: 20px;
  background: blue;
  position: absolute;
  top: 45%;
  left: 45%;
}

css after before

/*
	"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 { ... }
*/

after before effect in css

div::before {
  content: "before";
}
div::after {
  content: "after";
}

before after css

<style>
  div::before {
  content: "before";
}
div::after {
  content: "after";
}
</style>
<div>
  before
  <!-- Rest of stuff inside the div -->
  after
</div>