Generation Style by Eric Meyer

blockquote:: after {
content: "“";
font-size: 4em;
opacity: 0.67;
/* placement styles here */
}
a[href$=".pdf"]::after {
content: url(i/icon.png);
height: 1em;
margin-right: 0.5em;
vertical-align: top;
}
a[href]::after * {
max-width: 100%;
max-height: 100%
}
a[href$=".pdf"]::after {
content: '';
height: 1em; width: 1em;
margin-right: 0.5em;
vertical-align: top;
background: center/contain;
background-image: url(i/icon.png);
}
a[href$=".pdf"] span {
height: 1em; width: 1em;
margin-right: 0.5em;
vertical-align: top;
background: center/contain;
background-image: url(i/icon.png);
}
.clearfix::after {
content: '';
display: table;
clear: both;
}
.clearfix::after {
content: '';
display: table;
clear: both;
border: 10px solid purple;
}
.clearfix::after {
content: '';
display: block;
clear: both;
border: 10px solid purple;
}
<header>
<h1>Corduroy pillows</h1>
<p>Lorum ipsum...</p>
</header>
header::after {
content: " ";
display: block;
height: 1em;
}
header::after {
content: " ";
display: block;
height: 1em;
background: linear-gradient(to right, #DDD, #000, #DDD) center / 100% 1px no-repeat;
}
div[id]::before {
content: attr(id);
}
div[id]::before {
content: '#' attr(id);
font: 0.75rem monospace;
position: absolute;
top: 0;
left: 0;
border: 1px dashed red;
padding: 0 0.25em;
background: #FFD;
}
div[id]::before {
content: '#' attr(id);
font: 0.75rem monospace;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 1px dashed red;
padding: 0 0.25em;
background: #FFD8;
}
div[id]::before {
content: attr(id);
font: bold 1.5rem Georgia serif;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 1px dashed red;
padding: 0 0.25em;
background: #FFD8;
}
pre {
padding: 0.75em 1.5em;
background: #EEE;
font: medium Consolas, monospace;
position: relative;
}
<pre class="css">
...
</pre>
pre::before {
content: attr(class);
display: block;
padding: 0.25em 0 0.15em;
font: bold 1em Noah, sans-serif;
text-align: center;
text-transform: uppercase;
}
pre::before {
content: attr(class);
display: block;
padding: 0.25em 0 0.15em;
margin: -0.75em -1.5em 1em;
font: bold 1em Noah, sans-serif;
text-align: center;
text-transform: uppercase;
}
pre::before {
content: attr(class);
display: block;
padding: 0.25em 0 0.15em;
position: absolute;
top: 0;
right: 0;
left: 0;
font: bold 1em Noah, sans-serif;
text-align: center;
text-transform: uppercase;
}
pre::before {
content: attr(class);
display: block;
padding: 0.25em 0 0.15em;
position: absolute;
top: 0;
right: 0;
bottom: 0;
writing-mode: vertical-rl;
font: bold 1em Noah, sans-serif;
text-align: center;
text-transform: uppercase;
}
pre::before {
content: attr(class);
display: block;
padding: 0.25em 0 0.15em;
position: absolute;
top: 0;
right: 0;
bottom: 0;
writing-mode: vertical-rl;
transform: rotate(180deg);
font: bold 1em Noah, sans-serif;
text-align: center;
text-transform: uppercase;
}
pre.css:: before {
content: '{ CSS }';
}

pre.html::before {
content: '< HTML >';
}

pre.js::before,
pre.javascript::before {
content: '({ JS })();';
}
pre {
display: grid;
grid-template-columns: min-content 1fr;
grid-gap: 0.75em;
}

pre::before {
content: attr(class);
margin: -1em 0;
padding: 0.25em 0.1em 0.25em 0;
writing-mode: vertical-rl;
transform: rotate(180deg);
font: bold 1em Noah, sans-serif;
text-align: center;
text-transform: uppercase;
}
li.news::before {
content: attr(data-cat);
background-color: orange;
color: white;
}
h1 { counter-reset: section; }
h2 { counter-reset: subsection; }
h2 { counter-increment: section; }
h3 { counter-increment: subsection; }
h2::before {
content: counter(section) ".";
}
h2::before {
content: counter(section) counter ":" (subsection, upper-roman);
}

--

--

--

A web developer and author living and working in Brighton, England. Everything I post on Medium is a copy — the originals are on my own website, adactio.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Studio: Lessons from October

LinkedIn Design Challenge

Value-Centric Design

Design Thinking Challenge

210 Million QQ Users Receive 1.79

I burned out on Product Design

Dead Wake: Immersive Authoring

Opensource for Designers? Yes!

A group of ladies having an efficient communication contributing to a project.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jeremy Keith

Jeremy Keith

A web developer and author living and working in Brighton, England. Everything I post on Medium is a copy — the originals are on my own website, adactio.com

More from Medium

Introducing Mission

A design dialogue at the Jamia Millia Islamia

Announcing UX London 2022

2022 Resilience Tech Report for SXSW Preview

Howdy! Back in 2015, I started sharing everything I’d recently learned into a kind of “music album” of knowledge to drop at SXSW. It’s a side project that hasn’t left my side, thus far — I guess it saves me time so I don’t have to write another book :+). In a nutshell, the science of resilience turns out to be as complex as the science of design. This is my first crack at decoding it.