cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


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.

              <h1 id="stop">Hashtag Links with Margin</h1>
<ol class="list">
  <li><a href="#sone">Section One</a></li>
  <li><a href="#stwo">Section Two</a></li>
  <li><a href="#sthree">Section Three</a></li>
  <li><a href="#sfour">Section Four</a></li>
<h2 id="sone" class="xtarget">Section One <a class="up" href="#top">〈</a><a class="down" href="#stwo">〈</a></h2>
<p>Narwhal migas blog art party slow-carb, butcher cliche retro. Fashion axe tumblr fap slow-carb. Cronut health goth cold-pressed pickled franzen lumbersexual, asymmetrical drinking vinegar gentrify hella letterpress intelligentsia. Crucifix master cleanse next level, lo-fi pinterest food truck artisan salvia biodiesel cold-pressed. Squid semiotics tumblr, pour-over sustainable actually hella pickled plaid crucifix DIY yuccie narwhal. Bushwick humblebrag vice man braid, plaid mumblecore trust fund portland everyday carry hashtag church-key taxidermy food truck cred farm-to-table. Bushwick 3 wolf moon echo park, fixie beard thundercats vinyl ramps food truck pickled.</p>
<h2 id="stwo" class="xtarget">Section Two <a class="up" href="#sone">〈</a><a class="down" href="#sthree">〈</a></h2>
<p>Literally health goth marfa DIY, godard aesthetic cred single-origin coffee. Ennui distillery gluten-free, affogato tumblr lumbersexual post-ironic tote bag keffiyeh banjo kale chips pop-up small batch raw denim. Banjo salvia authentic, typewriter aesthetic tofu pickled beard ethical man braid street art. Crucifix blue bottle cornhole, meh umami artisan salvia hashtag. Chillwave heirloom crucifix try-hard skateboard microdosing, kale chips fanny pack kickstarter lumbersexual craft beer lomo. Shabby chic mixtape jean shorts, poutine flexitarian letterpress art party. Whatever kogi shabby chic bushwick, post-ironic before they sold out truffaut wolf ramps irony vegan.</p>
<h2 id="sthree" class="xtarget">Section Three <a class="up" href="#stwo">〈</a><a class="down" href="#sfour">〈</a></h2>
<p>Church-key affogato cliche twee. Hammock skateboard beard, photo booth raw denim mlkshk four loko pug next level pitchfork asymmetrical roof party. Umami messenger bag ugh yr. Chartreuse direct trade mustache squid everyday carry, kale chips gastropub iPhone seitan normcore typewriter tilde. Williamsburg gastropub master cleanse, humblebrag skateboard chartreuse photo booth tofu kickstarter readymade 3 wolf moon echo park. Gochujang gluten-free pitchfork wayfarers humblebrag thundercats. Mumblecore green juice polaroid, cornhole +1 yr 3 wolf moon mixtape 90's kickstarter quinoa tacos four dollar toast lumbersexual meggings.</p>
<h2 id="sfour" class="xtarget">Section Four <a class="up" href="#sthree">〈</a></h2>
<p>Vinyl deep v mustache pabst bespoke, vegan fixie typewriter pitchfork 8-bit church-key intelligentsia tacos. Sustainable brunch aesthetic, ramps bushwick 3 wolf moon dreamcatcher tumblr. Meh aesthetic green juice vinyl. Pug yuccie occupy, schlitz pabst roof party mustache authentic listicle. Selvage pinterest messenger bag, green juice meggings sriracha swag. Ennui tote bag dreamcatcher, lumbersexual church-key knausgaard slow-carb pickled street art. Literally godard gluten-free thundercats selvage flannel bitters squid messenger bag, yr blue bottle intelligentsia offal vinyl YOLO.</p>
              body { color:#777; font-family:'Lato', sans-serif; font-size:16px; line-height:1.714; max-width:600px; margin:24px auto 48px; padding:1.5em; }
a { color:#2bbbb3; text-decoration:none; -webkit-transition:.2s; transition:.2s; }
a:hover { color:#31d4cc; border-bottom:1px dotted; }

/* Style :target with margin & transition. The 's' can be changed to whatever works (I used it here to represent 'sections'). Adjust transition speed to .001s for instantaneous. */
.xtarget:target { color:#2bbbb3; margin-top:-12px; padding-top:60px; }

/* Add 'Currently Reading' to targeted section (optional) */
.xtarget:target:before { content:'Currently Reading'; font-family:'Open Sans', sans; font-size:12px; background:#ccc; border-radius:3px; background-clip:padding-box; color:#fff; padding:0 5px; position:absolute; top:24px; }

/* Navigation arrows for list items (optional) */
h1, h2 { color:#5e5e5e; font-family:'Georgia', Georgia, serif; font-weight:400; letter-spacing:-.025em; }
h1 { font-size:36px; }
h2 { position:relative; font-size:24px; margin:36px 0 12px; }
h2 a { font-size:16px; border:1px solid #efefef; border-radius:1000px; background-clip:padding-box; display:inline-block; width:24px; height:36px; line-height:38px; margin-left:15px; vertical-align:middle; }
h2 a:hover { color:#fff; background:#2bbbb3; }
h2 a.up {
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
transform:rotate(90deg); }
h2 a.down {
-ms-transform:rotate(-90deg); /* IE 9 */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
transform:rotate(-90deg); }
p { color:#777; font-size:18px; line-height:1.714; font-weight:300; letter-spacing:.01em; margin-bottom:24px; }

/* Hover Selectors to list (optional) */
.list li { position:relative; padding-bottom:6px; }
.list li:hover:before { content:'›'; color:#2bbbb3; position:absolute; left:-40px; line-height:1.2; }

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.


Loading ..................