Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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?
    
              
            
!

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%
              
            
!

JS

              
                
              
            
!
999px

Console