Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

+ 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

Auto Save

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

              
                <div class="intro">
  <h1>Advanced Link Styling</h1>
  <p >This shows how to CSS Transitions to animate your links and also uses Font Awesome icons to show the type of link.</p>
  <p>When copying the CSS for your own use, you will need to remove the .example1 or .example2 or .example 3 from the selectors. These were added to allow different stylings on the same page.</p>
</div>

<section class="example1">
  <h2>Example 1: CSS Transition on Background</h2>
  <p class="description">In this example CSS Transition is used on the background of the link to animate it from <code>background-color: transparent;</code> to <code>background-color: #dee8f1;</code> on the hover. This is the link of CSS that adds the transition animation: <code>transition: background-color 1s linear;</code></p>
  <p>To see all of the properties that you can transition and animate view this link on MDN <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties">Animatable CSS Properties.</a></p>

  <h3>Example one demo paragraph</h3>
  <p class="demo">This is <a href="#">a link right here to nowhere</a>. You can also try this link to <a href="http://google.com">http://google.com</a> to see what visited looks like. Click the link, the screen will go blank and then click the refresh button on your browser and it should refresh the page with the link visited.</p>
</section>

<section class="example2">
  <h2>Example 2: Animated Bottom Border</h2>
  <p>In this example the transition is a bit more complex. It uses</p>
  <ul>
    <li><b>:before</b> pseudo-element to add in a border-bottom that can be transitioned</li>
    <li><b>position: absolute</b> to allow for placement under the link</li>
    <li><b>transform: scaleX()</b> this is what changes the size of the border</li>
  </ul>
  <p class="note">Note: the <code>:before</code> and <code>:after</code> pseudo-element selectors can also be written as <code>::before</code>and <code>::after</code> starting in CSS3. Modern browsers accept both.</p>
  <h3>Example 2 Demo Paragraph</h3>
  <p class="demo">This is <a href="#">a link right here to nowhere</a>. You can also try this link to <a href="http://google.com">http://google.com</a> to see what visited looks like. Click the link, the screen will go blank and then click the refresh button on your browser and it should refresh the page with the link visited.</p>
</section>

<section class="example3">
  <h2>Example 3: Pseudo-elements for Link types</h2>
  <p>This is an example of using the :after and :before pseudo-elements to add an <span class="external">icon</span>.</p>
  <p>This uses the Font Awesome library. It's easily added in the CSS settings on CodePen. You will have to visit their site, <a class="external" href="https://fontawesome.com/">https://fontawesome.com/</a>,  for info on how to include this in a normal project. After you include Font Awesome in yor project you can add icons through the before and after pseudo element like used in the <code>.external::after</code> selector here. There are other ways to include Font Awesome fonts.</p>
 <h4>Here is the process used for the this page to add pseudo-element icons.</h4>
  <ol><li>First we need to include the Font Awesome font. Yes, it's a font but instead of letters and numbers it has icons. The simplest way is through the CDN link. Go to this page: <a href="https://fontawesome.com/account/cdn">https://fontawesome.com/account/cdn</a> and copy the link to the CDN (free version). When this pen was created it was:
   <pre><code> &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous"&gt;</code></pre>
    </li>
    <li>Add the link to your page. 
      <ul>
        <li>For normal HTML, paste the entire link element into the head of the HTML file.</li>
        <li>On CodePen you can link to this in Settings > CSS > Add External Stylesheets/Pens and then just paste in the url: <code>https://use.fontawesome.com/releases/v5.12.0/css/all.css</code></li>
      </ul></li>
    <li>Create a class you can add to elements where you want the icon added. For this pen we created .external, .pdf and .video classes.</li>
    <li>Then, in your CSS file, write selectors that add the class with either ::after or ::before depending on where you want your icon. For example here's what is used in this pen
    <pre><code>.example3 .external::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: " \f35d";
  font-size: .8rem;
}

.example3 .pdf::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f1c1  ";
}

.example3 .video::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f03d  ";
}</code></pre>
      
      <p>Notice that it is the content property's value that is changing to get the icon you need. Also notice that you may need to add spaces before or after the unicode. Also notice that you have to add a \ in front of the unicode value for the font.</p>
      <p>The font-family and font-weight must be used as-is and not changed, or the icon won't show.</p>
    </li>
    </ol>
  
  
  <h3>Example 3 Demo Paragraph</h3>
  <p class="demo">This is <a href="#">a link right here to nowhere</a>. You can also try this link to <a class="external" href="http://google.com">http://google.com</a> to see what visited looks like. Click the link, the screen will go blank and then click the refresh button on your browser and it should refresh the page with the link visited.</p>
  <p>Here are some example icons: The last two have both the external at the end of the link and a type icon at the beginning of the type text.</p>
  <ul>
    <li><b>External website:</b> <a href="https://www.bmcc.cuny.edu" class="external">https://www.bmcc.cuny.edu</a>. View the <a href="https://fontawesome.com/icons/external-link-alt?style=regular">External icon on Font Awesome</a></li>
    <li><b class="pdf">PDF File</b>: <a href="https://legacy.gitbook.com/download/pdf/book/frontendmasters/front-end-handbook-2017" class=" external">Front-end Developer Handbook 2017</a> by Front End Masters on <a href="https://gitbook.com">GitBook</a>. View the <a href="https://fontawesome.com/icons/file-pdf?style=regular">PDF icon on Font Awesome</a></li>
    <li><b class="video">Video</b>: <a href="https://youtu.be/aEDO_C_AI-0" class=" external">https://youtu.be/aEDO_C_AI-0</a>. View the <a href="https://fontawesome.com/icons/video?style=solid">Video icon on Font Awesome</a></li>
  </ul>
</section>
              
            
!

CSS

              
                
.example1 a {
  color: #4478A6;
  text-decoration: none;
  background-color: transparent;
  transition: background-color 1s linear;
  padding: 3px;
}
.example1 a:hover {
  color: #26445e;
  background-color: #dee8f1;
}
.example1 a:visited {
  color: #96b7d4;
}


.example2 a {
  color: #4478A6;
  text-decoration: none;
  position: relative;
  padding: 2px;
}
.example2 a:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-bottom: 1px solid #26445e;
  transform: scaleX(0);
  transition: transform 0.5s ease;
}
.example2 a:hover:before {
  transform: scaleX(1);
}
.example2 a:hover {
  color: #26445e;
}
.example2 a:visited {
  color: #96b7d4;
}


/* Basic link styling for 3 */
.example3 a {
  color: #4478A6;
  text-decoration: none;
}
.example3 a:hover {
  color: #26445e;
  border-bottom: 1px solid #26445e;
}
.example3 a:visited {
  color: #96b7d4;
  border-color: #96b7d4;
}

/* These add in the font awesome font icons */
.example3 .external::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: " \f35d";
  font-size: .8rem;
}

.example3 .pdf::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f1c1  ";
}

.example3 .video::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f03d  ";
}



/*====================================
These styles are just to make the page look better. Not needed for the link styling.
*/
body{
    font-family: sans-serif;
    max-width: 40rem;
    margin: 0 auto;
  padding: 1rem;
}
p, li{
  line-height: 1.5;
  margin: 0 0 1rem 0;
}
h2{
  font-weight: 100;
  font-size: 2rem;
  margin: 5rem 0 .5rem 0;
}
h3{
  font-weight: 100;
  font-size: 1.5rem;
  margin: 2rem 0 .3rem 0;
}
section{
  margin-bottom: 2rem;
}
code{
  font-family: monospace;
  background-color: #eee;
  padding: 4px;
}
.intro p{
  font-size: 1.5rem;
}

.intro p:last-of-type{
  font-size: 1.2rem;
}
.demo{
  font-family: serif;
  line-height: 1.5;
  font-size: 1.2rem;
  border:1px #ccc dashed;
  padding: 10px;
}
.note{
/*   border:1px #ccc dashed; */
  padding: 10px;
  background-color: #efefef;
}

@media (min-width: 1800px){
  body{
    display: grid;
    grid-tempalte-columns: 1fr 1fr 1fr;
    grid-gap: 3rem;
  }
  
}
              
            
!

JS

              
                
              
            
!
999px

Console