w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home Essentials

Exciting Multi-line Highlights

W3TWEAKS by W3TWEAKS
September 21, 2020
in Essentials

Exciting Multi-line Highlights developed using Pug and Stylus. Selection of fun hover highlights for multi-line text. Careful when you hover over that spoiler.

See the Pen Exciting Multi-line Highlights by Manan Tank (@MananTank) on CodePen.

You might also like

Pill Styled Radio ButtonsPill Styled Radio Buttons

Custom radio button using CSS only

December 10, 2020
t-shirt cannon playful animated button concept

T-shirt cannon playful animated button concept

October 13, 2020

Created on March 19, 2020 Updated on April 7, 2020. A Pen by Manan Tank on CodePen. License.

Download
.container
  .instruction Hover the paragraph to see the effect 👀 

  h1 HIGHLIGHT 📝
  .content.v2
    p Woah, That's pretty cool, Gotta remember that ! I'm just gonna highlight this for future reference. Who knows I might forget this. Better not forget this. I wish my memory was better, But oh well, that's that.

  h1 SPOILERS 💩
  .content.v3
    p This season is gonna blow your mind ! Like this season is crazy dawg! You know what happens on the first episode ? You are not gonna believe me bro, like It's crazy dude !
    
  h1 UNDERLINE 🍧
  .content.v1
    p This thing is really really important, you don't wanna miss this. Trust me. This is like really really important. like really really.
    
  h1 DASHES 😎
  .content.v4
    p I dont' know dude, May be this could be important, May be not, who knows? I don't know, Do you know? Do you know somebody that knows this maybe, call me maybe.
    
  h1 SEE DELETED 🙈
  .content.v5
    p Remember when I told you about this thing back in the day, when I was younger, you know those days right? Well guess what, I was totally wrong about that. Heh, This is embarassing 
    
  h1 SEE DELETED 🙈2 
  .content.v6
    p Hold on, Hold on. May be I WAS right at the time, they just changed the stuff now. Like I didn't know this was gonna happen, but now that It did, Well I guess I have to remove this now..
    
  h1 CRAZY LINES 🤡
  .content.v7
    p YO! What's up everybody, It's ya-boi Shloopy Mcfloopy-face, back at it again with the new stuff! This time it's gon-be liiiittt, son ! Hit that Subscribbe Button, Smash that bell! See you guys on the next video
    
  h1 SWIPE 🎨
  .content.v8
    p Here is the point, This point of mine is Striking, It is powerful. It is important. I have the data to back that up, Statistics show that this point of mine is indeed true. A Study conducted in 2015 proves that I have been right all along, what you gonna do about it huh?
    

<div class="container">
  <div class="instruction">Hover the paragraph to see the effect 👀 </div>
  <h1>HIGHLIGHT 📝</h1>
  <div class="content v2">
    <p>Woah, That's pretty cool, Gotta remember that ! I'm just gonna highlight this for future reference. Who knows I might forget this. Better not forget this. I wish my memory was better, But oh well, that's that.</p>
  </div>
  <h1>SPOILERS 💩</h1>
  <div class="content v3">
    <p>This season is gonna blow your mind ! Like this season is crazy dawg! You know what happens on the first episode ? You are not gonna believe me bro, like It's crazy dude !</p>
  </div>
  <h1>UNDERLINE 🍧</h1>
  <div class="content v1">
    <p>This thing is really really important, you don't wanna miss this. Trust me. This is like really really important. like really really.</p>
  </div>
  <h1>DASHES 😎</h1>
  <div class="content v4">
    <p>I dont' know dude, May be this could be important, May be not, who knows? I don't know, Do you know? Do you know somebody that knows this maybe, call me maybe.</p>
  </div>
  <h1>SEE DELETED 🙈</h1>
  <div class="content v5">
    <p>Remember when I told you about this thing back in the day, when I was younger, you know those days right? Well guess what, I was totally wrong about that. Heh, This is embarassing </p>
  </div>
  <h1>SEE DELETED 🙈2 </h1>
  <div class="content v6">
    <p>Hold on, Hold on. May be I WAS right at the time, they just changed the stuff now. Like I didn't know this was gonna happen, but now that It did, Well I guess I have to remove this now..</p>
  </div>
  <h1>CRAZY LINES 🤡</h1>
  <div class="content v7">
    <p>YO! What's up everybody, It's ya-boi Shloopy Mcfloopy-face, back at it again with the new stuff! This time it's gon-be liiiittt, son ! Hit that Subscribbe Button, Smash that bell! See you guys on the next video</p>
  </div>
  <h1>SWIPE 🎨</h1>
  <div class="content v8">
    <p>Here is the point, This point of mine is Striking, It is powerful. It is important. I have the data to back that up, Statistics show that this point of mine is indeed true. A Study conducted in 2015 proves that I have been right all along, what you gonna do about it huh?</p>
  </div>
</div>
green   = #55efc4
red     = #d63031
blue    = #0984e3
purple  = #4834d4
  
body
  font-family   Arial
  font-size     1.5rem
  line-height   150%
  
.container
  max-width   600px
  margin      0 auto
  padding     1em 
  
  h1
    font-size 2.2rem
  
  .instruction
    font-size 1.8rem
    margin-bottom 4rem
    font-style italic
  
 
.content
  margin-bottom 4em
  p
    display inline
    background-repeat no-repeat
    transition all 500ms ease-in-out

// UNDERLINE--------------------------------
.v1
  thickness = 5px
  p
    background-position bottom left
    background-size 0% thickness
    background-image linear-gradient(red, red)
    padding-bottom thickness
  &:hover
    p
      background-size 100% thickness
      
// HIGHLIGHT --------------------------------      
.v2
  p
    background-position left
    background-size 0% 100%
    background-image linear-gradient(green, green)
  &:hover
    p
      background-size: 100% 100%

      
// SPOILERS ------------------------------------------
.v3
  p
    color transparent
    background-position right
    background-size 100% 100%
    background-image linear-gradient(blue, blue)
  &:hover
    p
      color black
      background-size 0% 100%
      
 // DASHES -------------------------------------
.v4
  thickness = 3px
  p
    background-position bottom left
    background-size 0% thickness
    background-image repeating-linear-gradient(to right, purple 0 thickness, transparent 0 (2*thickness))
    padding-bottom thickness
  &:hover
    p
      background-size 100% thickness
      
 // DELETED v1-------------------------------------
.v5
  thickness = 3px
  p
    background-position center left
    background-size 100% thickness
    background-image linear-gradient(to right, black, black)
    padding-bottom thickness
  &:hover
    p
      background-size 100% 100%
      color white
      background-image linear-gradient(to right, red, red)
      
 // DELETED v2-------------------------------------
.v6
  thickness = 4px
  p
    background-position center left
    background-size 100% thickness
    background-image linear-gradient(to right, black, black)
    padding-bottom thickness
  &:hover
    p
      background-position bottom left
      background-size 100% (thickness/2)
      font-style italic
      
      
// CRAZY -------------------------------------
.v7
  p
    background-position left
    background-size 0% 100%
    background-image linear-gradient(to right, green, green)
  &:hover
    p
      background-position right
      background-size 100% 100%
      
      
 // SWIPE -------------------------------------
.v8
  thickness = 4px
  p
    background-position left
    background-size 0% 100%
    background-image linear-gradient(to right, green, yellow)
    padding-bottom thickness
    box-decoration-break clone
    -webkit-box-decoration-break clone
  &:hover
    p
      background-size 100% 100%
body {
  font-family: Arial;
  font-size: 1.5rem;
  line-height: 150%;
}
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 1em;
}
.container h1 {
  font-size: 2.2rem;
}
.container .instruction {
  font-size: 1.8rem;
  margin-bottom: 4rem;
  font-style: italic;
}
.content {
  margin-bottom: 4em;
}
.content p {
  display: inline;
  background-repeat: no-repeat;
  transition: all 500ms ease-in-out;
}
.v1 p {
  background-position: bottom left;
  background-size: 0% 5px;
  background-image: linear-gradient(#d63031, #d63031);
  padding-bottom: 5px;
}
.v1:hover p {
  background-size: 100% 5px;
}
.v2 p {
  background-position: left;
  background-size: 0% 100%;
  background-image: linear-gradient(#55efc4, #55efc4);
}
.v2:hover p {
  background-size: 100% 100%;
}
.v3 p {
  color: transparent;
  background-position: right;
  background-size: 100% 100%;
  background-image: linear-gradient(#0984e3, #0984e3);
}
.v3:hover p {
  color: #000;
  background-size: 0% 100%;
}
.v4 p {
  background-position: bottom left;
  background-size: 0% 3px;
  background-image: repeating-linear-gradient(to right, #4834d4 0 3px, transparent 0 6px);
  padding-bottom: 3px;
}
.v4:hover p {
  background-size: 100% 3px;
}
.v5 p {
  background-position: center left;
  background-size: 100% 3px;
  background-image: linear-gradient(to right, #000, #000);
  padding-bottom: 3px;
}
.v5:hover p {
  background-size: 100% 100%;
  color: #fff;
  background-image: linear-gradient(to right, #d63031, #d63031);
}
.v6 p {
  background-position: center left;
  background-size: 100% 4px;
  background-image: linear-gradient(to right, #000, #000);
  padding-bottom: 4px;
}
.v6:hover p {
  background-position: bottom left;
  background-size: 100% 2px;
  font-style: italic;
}
.v7 p {
  background-position: left;
  background-size: 0% 100%;
  background-image: linear-gradient(to right, #55efc4, #55efc4);
}
.v7:hover p {
  background-position: right;
  background-size: 100% 100%;
}
.v8 p {
  background-position: left;
  background-size: 0% 100%;
  background-image: linear-gradient(to right, #55efc4, #ff0);
  padding-bottom: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.v8:hover p {
  background-size: 100% 100%;
}
Tags: Link styles
Previous Post

CSS Flipping Text

Next Post

CSS Logical Properties

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

Pill Styled Radio ButtonsPill Styled Radio Buttons

Custom radio button using CSS only

by W3TWEAKS
December 10, 2020

Custom radio button style using only CSS (SCSS) by taking advantage of sibling selectors and the :checked psuedo class. See...

t-shirt cannon playful animated button concept

T-shirt cannon playful animated button concept

by W3TWEAKS
October 13, 2020

Your shirt order blasts off from a t-shirt cannon in this playful button concept from Jhey, built with GSAP. See...

chat bubble smoothly morphs into a "close" X

Chat bubble smoothly morphs into a “close” X

by W3TWEAKS
October 13, 2020

A chat bubble smoothly morphs into a "close" X in this elegant Pen from Mikael Ainalem. See the Pen Chat Bubble by...

Clipped Overlapping Grid Items

Clipped Overlapping Grid Items

by W3TWEAKS
September 30, 2020

Hristovv demonstrates how `clip-path` can help build magazine-style photo layouts with CSS. See the Pen Clipped overlapping grid items by...

Next Post
CSS Logical Properties

CSS Logical Properties

Discussion about this post

Popular Posts

100 Creative CSS Cards

41 Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

20 HTML & CSS pricing tables

49 CSS Tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

89 Best CSS Toggle Switches

55 Useful handpicked CSS Buttons with examples and demos

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools