New 3 CSS Cool Effects using the ::before and ::after pseudo-elements

Effect #3 using CSS Pseudo Elements
Share the knowledge with others
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Hello friends, hope you are doing well. I promised you all in my previous post “CSS Pseudo Elements – A complete Guide with Examples” that I will be covering some cool and amazing effects that you can create using the ::before and ::after CSS pseudo-elements. If you have not gone through my post for pseudo-elements, I strongly recommend you to do that first.

In this post, I will be creating some interesting effects using the pseudo-elements but not limited to applying animations, clipping, transforming etc. to get nice looking CSS effects. I will cover animations, clipping, etc. in my future posts, so stay tuned.

Effect #1

In this effect, we will try to add a gradient border to a text in the paragraph. You can use any element as a replacement to a paragraph element, such as heading elements H1 to H6, or Div, etc.

Output

Effect #1 using CSS Pseudo Elements
Effect #1 using CSS Pseudo Elements

Approach

In this, we fill the parent element (in our example, it is a paragraph element) with a gradient. Then we use the ::before CSS pseudo-element to cut out the interior in a different color (white in our example). We need to reduce the size of the of the ::before pseudo-element. In this example, we are reducing it by 10px both width and height. We also need to position it to make that cutout layout. In our example, we use moving 5px from the top and 5px from the left. This makes the element visually look like having a gradient border.

Source Code

HTML

<!--The paragraph container element-->
<p>
  <!--
The span container element
That holds the content to be
displayed in the paragraph
-->
  <span>
    <!--Content-->
  Thanks for going through <a href="https://blogs.hanumanteysoftwaresolutions.com/" target="_blank">Our Blog.</a> Please leave us your feedback at <a href="#" target="_blank">Cool Effects using CSS pseudo elements</a>
  </span>
</p>

CSS

/*Styling Paragarph Element*/
p {
  /*Setting Paragraph width*/
  width: 300px;
  /*Setting margin to horizontally center align*/
  margin: 0 auto;
  /*Moving little down*/
  margin-top: 60px;
  /*Adding spacing of 20px*/
  padding: 20px;
  /*Setting relative position*/
  position: relative;
  /*Setting Gradient background*/
  background-image: linear-gradient(45deg, darkorange, red);
}
/*Setting every element position relative*/
p * {
  position: relative;
}
/*Setting ::before pseudo element*/
p::before {
  /*Empty content as we do not display anything*/
  content: "";
  /*setting background color to white*/
  background-color: #fff;
  /*setting display style to block*/
  display: block;
  /*setting position to absolute*/
  position: absolute;
  /*moving down 5px*/
  top: 5px;
  /*moving right 5px*/
  left: 5px;
  /*
  reducing width
  100% of the paragraph element - 10 px
  where 10 px comes from moving it 5px right
  this will make 5px of space at right side
  and 5px space at left side
  */
  width: calc(100% - 10px);
  /*
  reducing height
  100% of the paragraph element - 10 px
  where 10 px comes from moving it 5px down
  this will make 5px of space at top
  and 5px space at bottom
  */
  height: calc(100% - 10px);
}

Click here to get a full source code.

Effect #2

In this effect, we will create an animating line under the list item elements. You can replace the list item elements with any other block-level elements.

Output

Effect #2 using CSS Pseudo Elements
Effect #2 using CSS Pseudo Elements

Approach

In this, we fill the <li> element with darkgorange color and sets the text color to white. Then we use the ::after pseudo-element to create a solid bottom border of 2px of white color. We move that 0px left and 0px top to align it with the <li> element itself. Now, we set the width to 0px so that it becomes invisible.

Then we add the ::after pseudo-element to the :hover class to make the width of the ::after element to 100%, which we set 0px earlier.

Last but not least we have added the transition to creating a 0.5 second of animation of changing the bottom border of the list element from 0 to 100%.

Source Code

HTML

<!--Creating Vertical Menu-->
<!--Using Un-Ordered List-->
<ul>
  <li>
    <a href="http://hanumanteysoftwaresolutions.com/" target="_blank">
      Home
    </a>
  </li>
  <li>
    <a href="https://blogs.hanumanteysoftwaresolutions.com/" target="_blank">
    About Us
    </a>
  </li>
  <li>
    <a href="http://hanumanteysoftwaresolutions.com/" target="_blank">
    Contact Us
    </a>
  </li>
</ul>

CSS

/*
Setting Body background to black
*/
body {
  background-color: black;
}
/*
Removing text decoration of anchor tags
And setting the text color to white
*/
a {
  text-decoration: none;
  color: white;
}
/*
Setting the Unordered list style to none
Moving the list by setting margin 50px from top
Also setting the position relative
*/
ul {
  list-style: none;
  margin: 50px auto;
  position: relative;
}
/*
Setting position to relative
*/
ul * {
  position: relative;
}
/*
Styling list element by setting:
width to 150px
height to 2em
padding to 0.5em so text not touch the border
background to dark orange
display style to block
text color to white
*/
li {
  width: 150px;
  height: 2em;
  padding: 0.5em;
  background: darkorange;
  display: block;
  color: white;
}
/*
Styling the ::after pseudo element by setting:
content to blank
heigth to 100% of list element
left to zero and top to zero
width to 0px 
z-index to 89, you can use any higher value to ensure it appears on top
border bottom to 2p white color solid 
text color to white
position to absolute
transition for animating it for 0.5 sec with ease effect
*/
li::after {
  content: "";
  height: 100%;
  left: 0;
  top: 0;
  width: 0px;
  z-index: 89;
  border-bottom: 2px solid white;
  text-color: white;
  position: absolute;
  transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
}
/*
Styling the hover pseudo class ::after element by setting
width to 100% will animate from width 0px to 100%
border bottom of 2px white color solid
text color to white
z-index to 89 so that it remains at the top of all other elements
*/

li:hover::after {
  width: 100%;
  border-bottom: 2px solid white;
  text-color: white;
  z-index: 89;
}

Click here to get the full source code.

Effect #3

In this, we will create an animating border to an anchor tag (<a>), which visually appears as a button.

Output

Effect #3 using CSS Pseudo Elements
Effect #3 using CSS Pseudo Elements

Approach

This is a little bit tricky. For this CSS animation effect, we have created an anchor element (<a></a>). We set the background color of the document (<body> element) black. You can choose any color you want. We also set the text color of the anchor element to black with a white background. It gives us an illusion of a cut-out.

Next, we create the ::before pseudo-element to an anchor element. We size and position it exactly over the anchor element so that it covers the entire white background anchor element. We set the background color of the ::before pseudo-element to black to match to blend with the background. We also set transition and transformation to it.

In our next step, we have added the ::before pseudo-element to the :hover pseudo-class of the anchor element. In this, we just rotate and translate the ::before pseudo-element in a way that it unhides the anchor element. It does so by rotating itself to -90 degree and translating to -50% of the X-axis and -100% of the Y-axis.

Finally, we add the ::after pseudo-element with 2px less in size with a white background. We also need to add the content Click Me to it. As the content under the anchor tag gets behind (hidden under) the ::before pseudo-element. We also provided the black border of 4px. Even though the border is there, it will visually reveal on mouse hover which rotates the ::before pseudo-element and reveals the actual anchor tag with a white background color.

Enough of talking, let us look into the code. Shall we?

Source Code

HTML

<a href="http://hanumanteysoftwaresolutions.com/" target="_blank">Click Me</a>

CSS

body {
  background: black;
}

a {
  display: block;
  text-decoration: none;
  color: black;
  font-size: 3em;
  position: relative;
  background: white;
  text-align: center;
  margin: 50px auto;
  width: 250px;
  height: 70px;
}

a::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: black;
  content: "";
  transform: rotate(0deg) translate(0);
  transform-origin: top left;
  transition: transform 0.5s;
}

a:hover::before {
  transform: rotate(-90deg) translate(-50%, -100%);
}

a::after {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
  background: white;
  border: black solid 4px;
  color: black;
  content: "Click Me";
}

Click here to get a full source code.


Share the knowledge with others
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Leave a Reply

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