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.
Created on March 19, 2020 Updated on April 7, 2020. A Pen by Manan Tank on CodePen. License.
index.pug
Compiled (HTML)
.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>style.stylus
Compiled (CSS)
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%;
}
