Pen highlighter effect in css

2 min read 07-10-2024

Bring Your Text to Life: The Pen Highlighter Effect in CSS

Have you ever wanted to highlight specific parts of text, but with a more dynamic and visually appealing effect than the simple yellow highlight? Enter the pen highlighter effect, a CSS trick that simulates the look of a physical highlighter pen being drawn across text. It adds a touch of playful energy and emphasizes important information in a unique way.

The Scenario: Bringing Your Text to Life

Imagine you're designing a website or document and want to draw attention to certain words or phrases. You could use bolding, italics, or underline, but these techniques might feel a bit outdated or too blunt. Instead, the pen highlighter effect provides a fresh and engaging visual cue.

The Code: A Simple Implementation

Here's a basic example of how to achieve the pen highlighter effect in CSS:

.highlighted-text {
  position: relative;
  display: inline-block;
}

.highlighted-text::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: yellow;
  transform: translateY(-50%);
  transform-origin: left;
  animation: highlight 2s linear forwards;
}

@keyframes highlight {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

In this code:

We create a highlighted-text class to apply the effect.
We use a pseudo-element (::before) to create a yellow line that spans the width of the text.
The animation property creates a smooth transition where the line grows from left to right, simulating the highlighter pen's movement.

Insights: Customization and Creativity

The pen highlighter effect is incredibly versatile and can be customized in many ways:

Colors: Experiment with different colors to match your website's design or create a specific mood.
Line Thickness: Adjust the height of the pseudo-element to control the thickness of the highlighter line.
Animation: Modify the animation duration and timing functions to change the speed and style of the highlighting effect.
Direction: Instead of highlighting from left to right, you can reverse the animation or even make the highlighter bounce back and forth.
Transparency: Use opacity to create a softer, more subtle highlight effect.
Gradients: Experiment with linear gradients to create a more realistic, blended highlighter look.

Beyond the Basics: Adding Interactive Elements

The pen highlighter effect can be even more engaging when combined with JavaScript. You could:

Trigger the effect on hover: Highlight text when the user's mouse hovers over it.
Implement a click-to-highlight function: Allow users to select text to be highlighted.
Create a user-controlled highlighter: Allow users to draw their own highlights on the page.

Conclusion: A Powerful and Playful Tool

The pen highlighter effect is a simple yet powerful tool for adding visual interest and emphasis to your text. By customizing the CSS and potentially incorporating JavaScript, you can create unique and engaging highlighting experiences for your website visitors.

Ready to start experimenting? Check out these resources:

CodePen: https://codepen.io/ (Explore and experiment with different pen highlighter effects)
CSS Tricks: https://css-tricks.com/ (Find tutorials and articles on CSS animation techniques)

Have fun bringing your text to life!