<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.