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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                .container
  .instruction Hover the paragraphs to see the effect 👀 

  h1 HIGHLIGHT 📝
  .content.v2
    p Lorem ipsum dolor sit amet. Qui recusandae itaque et suscipit neque et corrupti beatae aut quas officia quo placeat nobis eos expedita odit est vitae culpa? Et porro consequatur id culpa iusto ut architecto nesciunt.
    
  h1 SPOILERS 💩
  .content.v3
    p Qui beatae autem et saepe earum et eligendi quia qui Quis saepe ea maiores omnis et ratione saepe. Quo commodi amet ea mollitia nisi est inventore nemo ut voluptate nostrum aut assumenda vero.
    
  h1 UNDERLINE 🍧
  .content.v1
    p Est doloribus doloremque et debitis autem aut reiciendis voluptas 33 distinctio qui blanditiis odio! Et sequi quod est dolorem dolores et quam atque quo veniam unde et Quis adipisci qui dicta porro.
    
  h1 DASHES 😎
  .content.v4
    p Id optio Quis sit repellat obcaecati et sunt eius ut aspernatur quia aut nobis quas sit voluptatem fugiat. Ut alias magni qui nobis consequatur qui enim velit.
    
  h1 DELETED 🙈
  .content.v5
    p Aut commodi ratione ut facilis dolore et autem itaque. Ut omnis unde hic labore explicabo ut quaerat officiis. Et quisquam blanditiis et saepe aspernatur ut nesciunt architecto in nulla soluta in dolorem laborum quo nulla enim! 
    
  h1 DELETED 🙈2 
  .content.v6
    p Ut aspernatur minus a provident dolorem qui temporibus iure non voluptas labore? Quo Quis velit qui magni minus non odit voluptatem eum veritatis quidem ut dolores error sit omnis libero.
    
  h1 CRAZY LINES 🤡
  .content.v7
    p Et quidem soluta eos rerum aspernatur ut earum unde nam deserunt Quis et quidem numquam qui atque laudantium. In magni rerum est possimus praesentium ea alias tempora
    
  h1 GRADIENT SWIPE 🎨
  .content.v8
    p assumenda odio alias modi et nihil tempora ut corporis officiis. Et dolorum vero ut unde repellat rem possimus dignissimos id modi dolor cum laudantium voluptatem et soluta internos. Id odio enim vel quasi nesciunt qui
    
              
            
!

CSS

              
                yellow  = #f6e05e
red     = #e53e3e
grey    = #a0aec0
purple  = #4834d4
  
body
  font-family   Arial
  font-size     1.5rem
  line-height   150%
  background #edf2f7
  color #2d3748
  
.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(yellow, yellow)
  &:hover
    p
      background-size: 100% 100%

      
// SPOILERS ------------------------------------------
.v3
  p
    color transparent
    background-position right
    background-size 100% 100%
    background-image linear-gradient(grey, grey)
  &: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, yellow, yellow)
  &: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, #9ae6b4, yellow)
    padding-bottom thickness
    box-decoration-break clone
    -webkit-box-decoration-break clone
  &:hover
    p
      background-size 100% 100%
              
            
!

JS

              
                
              
            
!
999px

Console