<div class="container">
    <h1>Flag # links with CSS!</h1>
    <h2>(Never forget a href="#" placeholder again!)</h2>
  <div class="link-group">
    <a href="#">Hey look, this link goes to #</a>

    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">This link goes to MDN!</a>
  </div>
</div>
//broken link styles!
a[href="#"] {
  position: relative;
  &:after {
    content: 'This link is broken!';
    text-transform: uppercase;
    font-family: Courier;
    font-size: .625rem;
    position: absolute;
    left: 30px;
    top: 7px;
    box-shadow: 0px 1px 3px 0px slateblue;
    color: black;
    padding: 3px;
    transform: rotate(-17deg);
    background-color: yellow;
  }
}












///making this codepen pretty!

body {
  background: SteelBlue;
  font-family: 'Permanent Marker', sans-serif;
  color: midnightblue;
}

h1 {
  margin-bottom: 0;
}
h2 {
  margin-top: 0;
  font-size: 1.3rem;
}

.container {
  background-color: white;
  max-width: 590px;
  margin: 13vh auto;
  min-height: 200px;
  padding: 5vh 5vw;
  border-radius: 30px 0 / 30px;
}

.link-group {
  margin-top: 40px;
  margin-bottom: 40px;

  a {
    padding: 10px;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.