Perfect use of pseudo-elements in css3.

Most of the beginner and intermediate Web Designer/UI Developer do not know the use of ::before and ::after pseudo-elements in css3. ::Before pseudo-element is use for insert something before the selected element(s) and ::after pseudo-element is use for insert something after the selected element(s). Most of the things at the time of HTML conversion you use images for tool-tip arrow but instead of this if you use css3 ::before or ::after pseudo-element than you easily change the color of tip arrow instead of the image change and also remove the image loading time.

Example –

Left, right, top and bottom tip arrow using css3.

after and before arrow

In the given image –

Box1 – Display left side arrow and element class is .box1.
Box2 – Display right side arrow and element class is .box2.
Box3 – Display arrow in top and element class is .box3.
Box4 – Display arrow in bottom and element class is .box4.

Now,

Create arrow for box1

.box1{
   position: relative; // set position relative for creating tip arrow on this element(.box1)
   width: 100px;
   height: 100px;
   background-color: #ccc;
}

.box1::before{
   content: ""; // set content blank because we cannot use text or content for insert before this element(.box1).
   position: absolute;
   left: -14px; // go left in negative 14px of .box1
   top: 50%;
   margin-top: -7px; // for display exact center in vertical align 
   border-top: 14px solid transparent; // top border should be transparent with same pixel of left property
   border-bottom: 14px solid transparent; // bottom also should be blank with same pixel of top border
   border-right: 14px solid #ccc; // for left side tip arrow, always assign border-right with color which you want  
}

Create arrow for box2

.box2{
  // paste same as .box1 property
}

.box2:before{
   content: "";
   position: absolute;
   right: -14px; // // go right in negative 14px of .box2
   top: 50%; // same as .box1
   margin-top: -7px; // same as .box1
   border-top: 14px solid transparent; // same as .box1
   border-bottom: 14px solid transparent; // same as .box1
   border-left: 14px solid #ccc; // here also assign opposite border of tip side
}

Create arrow for box3

.box3{
  // paste same as .box1 property
}

.box3:before{
   content: "";
   position: absolute;
   top: -14px; // // go top in negative 14px of .box3
   left: 50%; 
   margin-left: -7px; // for display exact center in horizontal align
   border-left: 14px solid transparent; // left border should be transparent with same pixel of top property
   border-right: 14px solid transparent; // right also should be blank with same pixel of left border
   border-bottom: 14px solid #ccc; // here also assign opposite border of tip arrow side
}

Create arrow for box4

.box4{
  // paste same as .box1 property
}

.box4:before{
   content: "";
   position: absolute;
   bottom: -14px; // // go bottom in negative 14px of .box3
   left: 50%; 
   margin-left: -7px; // same as .box3
   border-left: 14px solid transparent; // same as .box3
   border-right: 14px solid transparent; // same as .box3
   border-top: 14px solid #ccc; // here also assign opposite border of tip arrow side
}

7 comments
  1. That is really fascinating, You are an overly professional
    blogger. I have joined your feed and look ahead to in search
    of more of your wonderful post. Additionally, I have shared your website in my social networks

Add Comment

Required fields are marked *. Your email address will not be published.