PageSourceSearch

https://kilianvalkhof.com/2026/css-html/my-take-on-a-link-to-a-random-post-with-only-html-css/

html kilianvalkhof.com collected 2026-10-02 03:56:55 UTC 35,611 bytes, 388 lines download raw bytes

1<!doctype html><html dir="ltr" lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="profile" href="https://gmpg.org/xfn/11"><link rel="alternate" type="application/rss+xml" title="Kilian Valkhof RSS Feed" href="https://kilianvalkhof.com/feed/" /><link rel="pingback" href="https://kilianvalkhof.com/xmlrpc.php" /><link rel="shortcut icon" href="https://kilianvalkhof.com/wp-content/themes/kvsixteen/static/img/favicon.png" /><meta property="fediverse:creator" content="[email protected]"/><meta name="monetization" content="$ilp.gatehub.net/962344046" /><meta name="theme-color" content="#597530" /> 
1<script>var protocol = document.location.protocol;
2		'https:' != protocol && (protocol = 'http:');
3		var count = document.createElement('script');
4		count.type = 'text/javascript';
5		count.async = !0;
6		count.src = protocol + '//hello.myfonts.net/count/324bc2';
7		var s = document.getElementsByTagName('script')[0];
8		s.parentNode.insertBefore(count, s);</script>
8 
8<script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script>
8 
8<script>(function(a,b,c){var d=a.history,e=document,f=navigator||{},g=localStorage,
9  h=encodeURIComponent,i=d.pushState,k=function(){return Math.random().toString(36)},
10  l=function(){return g.cid||(g.cid=k()),g.cid},m=function(r){var s=[];for(var t in r)
11  r.hasOwnProperty(t)&&void 0!==r[t]&&s.push(h(t)+"="+h(r[t]));return s.join("&")},
12  n=function(r,s,t,u,v,w,x){var z="https://www.google-analytics.com/collect",
13  A=m({v:"1",ds:"web",aip:c.anonymizeIp?1:void 0,tid:b,cid:l(),t:r||"pageview",
14  sd:c.colorDepth&&screen.colorDepth?screen.colorDepth+"-bits":void 0,dr:e.referrer||
15  void 0,dt:e.title,dl:e.location.origin+e.location.pathname+e.location.search,ul:c.language?
16  (f.language||"").toLowerCase():void 0,de:c.characterSet?e.characterSet:void 0,
17  sr:c.screenSize?(a.screen||{}).width+"x"+(a.screen||{}).height:void 0,vp:c.screenSize&&
18  a.visualViewport?(a.visualViewport||{}).width+"x"+(a.visualViewport||{}).height:void 0,
19  ec:s||void 0,ea:t||void 0,el:u||void 0,ev:v||void 0,exd:w||void 0,exf:"undefined"!=typeof x&&
20  !1==!!x?0:void 0});if(f.sendBeacon)f.sendBeacon(z,A);else{var y=new XMLHttpRequest;
21  y.open("POST",z,!0),y.send(A)}};d.pushState=function(r){return"function"==typeof d.onpushstate&&
22  d.onpushstate({state:r}),setTimeout(n,c.delay||10),i.apply(d,arguments)},n(),
23  a.ma={trackEvent:function o(r,s,t,u){return n("event",r,s,t,u)},
24  trackException:function q(r,s){return n("exception",null,null,null,null,r,s)}}})		
25  (window,"UA-17053513-3",{anonymizeIp:true,colorDepth:true,characterSet:true,screenSize:true,language:true});</script>
25 <style id="aoatfcss" media="all">@font-face {
26  font-family: 'Asturias';
27  src: url('/wp-content/themes/kvsixteen/static/font/324BC2_0_0.eot');
28  src: url('/wp-content/themes/kvsixteen/static/font/324BC2_0_0.eot?#iefix') format('embedded-opentype'),
29    url('/wp-content/themes/kvsixteen/static/font/324BC2_0_0.woff2') format('woff2'),
30    url('/wp-content/themes/kvsixteen/static/font/324BC2_0_0.woff') format('woff'),
31    url('/wp-content/themes/kvsixteen/static/font/324BC2_0_0.ttf') format('truetype');
32  font-display: swap;
33}
34@font-face {
35  font-family: 'HaboroSerif-NorBooIt';
36  src: url('/wp-content/themes/kvsixteen/static/font/324BC2_1_0.eot');
37  src: url('/wp-content/themes/kvsixteen/static/font/324BC2_1_0.eot?#iefix') format('embedded-openty/pe'),
38    url('/wp-content/themes/kvsixteen/static/font/324BC2_1_0.woff2') format('woff2'),
39    url('/wp-content/themes/kvsixteen/static/font/324BC2_1_0.woff') format('woff'),
40    url('/wp-content/themes/kvsixteen/static/font/324BC2_1_0.ttf') format('truetype');
41  font-display: swap;
42}
43@font-face {
44  font-family: 'HaboroSerif-NorBoo';
45  src: url('/wp-content/themes/kvsixteen/static/font/324BC2_2_0.eot');
46  src: url('/wp-content/themes/kvsixteen/static/font/324BC2_2_0.eot?#iefix') format('embedded-opentype'),
47    url('/wp-content/themes/kvsixteen/static/font/324BC2_2_0.woff2') format('woff2'),
48    url('/wp-content/themes/kvsixteen/static/font/324BC2_2_0.woff') format('woff'),
49    url('/wp-content/themes/kvsixteen/static/font/324BC2_2_0.ttf') format('truetype');
50  font-display: swap;
51}
52@font-face {
53  font-family: 'HaboroSerif-NorDem';
54  src: url('/wp-content/themes/kvsixteen/static/font/324BC2_3_0.eot');
55  src: url('/wp-content/themes/kvsixteen/static/font/324BC2_3_0.eot?#iefix') format('embedded-opentype'),
56    url('/wp-content/themes/kvsixteen/static/font/324BC2_3_0.woff2') format('woff2'),
57    url('/wp-content/themes/kvsixteen/static/font/324BC2_3_0.woff') format('woff'),
58    url('/wp-content/themes/kvsixteen/static/font/324BC2_3_0.ttf') format('truetype');
59  font-display: swap;
60}
61html {
62  box-sizing: border-box;
63}
64*,
65*:before,
66*:after {
67  box-sizing: inherit;
68}
69.hidden {
70  display: none;
71}
72body {
73  margin: 0;
74  background: url(//kilianvalkhof.com/wp-content/themes/kvsixteen/static/img/bg4.jpg) fixed no-repeat bottom left,
75    #f0f1e8 url(//kilianvalkhof.com/wp-content/themes/kvsixteen/static/img/bg.jpg) fixed no-repeat top right;
76  background-size: 100%, 100%;
77  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Ubuntu, Roboto, Oxygen-Sans, Cantarell, 'Helvetica Neue',
78    sans-serif;
79  -webkit-font-feature-settings: 'liga' 1, 'kern' 1, 'ss01' 1, 'opbd' 1;
80  font-feature-settings: 'liga' 1, 'kern' 1, 'ss01' 1, 'opbd' 1;
81}
82@media screen and (min-width: 62.5rem) {
83  body {
84    background-size: auto auto;
85  }
86}
87header {
88  position: relative;
89  height: 45vh;
90  min-height: calc(140px + 6vw);
91  width: 100%;
92  overflow: hidden;
93  background: #212220 url(//kilianvalkhof.com/wp-content/themes/kvsixteen/static/img/bg2.jpg) fixed no-repeat top right;
94  background-size: 100%;
95  clip-path: url(//kilianvalkhof.com/wp-content/themes/kvsixteen/static/img/shapes.svg#header);
96  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 6vw));
97  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 6vw));
98  font-family: 'HaboroSerif-NorBoo';
99  font-weight: 400;
100  text-shadow: 0 0 4px #212220;
101}
102@media screen and (min-width: 62.5rem) {
103  header {
104    background-size: auto;
105  }
106}
107header div {
108  position: absolute;
109  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
110  width: 80vw;
111  padding-bottom: 1.5rem;
112  margin: 0 10vw;
113  bottom: calc(6vw + 3rem);
114}
115@media screen and (min-width: 40rem) {
116  header div {
117    height: 40vh;
118  }
119}
120@media screen and (max-width: 62.5rem) {
121  @-moz-document url-prefix() {
122    header div {
123      bottom: calc(6vw + 4rem);
124    }
125  }
126}
127header h1 {
128  margin: 0;
129}
130header h1 a {
131  font-family: 'Asturias';
132  display: inline-block;
133  font-size: 6rem;
134  line-height: 0.6;
135  color: rgba(255, 255, 255, 0.8);
136  text-decoration: none;
137  font-weight: 400;
138  margin-top: 3rem;
139}
140@media screen and (min-width: 33.82rem) {
141  header h1 a {
142    margin-top: 9rem;
143    line-height: 0.4;
144  }
145}
146@media screen and (min-width: 40rem) {
147  header h1 a {
148    margin-top: 0;
149    position: absolute;
150    bottom: 2rem;
151  }
152}
153header h2 {
154  font-style: normal;
155  font-size: 1.125rem;
156  line-height: 1.5;
157  color: rgba(255, 255, 255, 0.6);
158  text-shadow: 0 0 #212220, 1px 1px #212220, -1px 1px #212220, 1px -1px #212220, -1px -1px #212220;
159  font-weight: 300;
160  margin: -0.6rem 0 0;
161}
162@media screen and (min-width: 33.82rem) {
163  header h2 {
164    margin: 0;
165  }
166}
167@media screen and (min-width: 40rem) {
168  header h2 {
169    line-height: 1;
170    position: absolute;
171    bottom: 0.3rem;
172  }
173}
174header form fieldset {
175  position: absolute;
176  right: 0;
177  bottom: 0;
178  border: 0.3rem;
179  padding: 0;
180  margin: 0;
181  width: 100%;
182  text-align: right;
183}
184@media screen and (min-width: 35rem) {
185  header form fieldset {
186    width: 20vw;
187  }
188}
189header form fieldset label {
190  display: block;
191  pointer-events: none;
192  opacity: 0;
193}
194header form fieldset input {
195  text-align: left;
196  border: 0;
197  display: inline-block;
198  background: url(//kilianvalkhof.com/wp-content/themes/kvsixteen/static/img/search.svg) no-repeat 6px 2px;
199  background-size: 20px;
200  font-size: 1rem;
201  height: 1.5rem;
202  line-height: 1.5rem;
203  color: rgba(255, 255, 255, 0.6);
204  font-family: 'HaboroSerif-NorBoo';
205  font-weight: 400;
206  width: 0;
207  padding-left: 32px;
208}
209header form fieldset button {
210  display: none;
211}
212header nav {
213  bottom: -2rem;
214  right: 0;
215  position: absolute;
216  width: 100%;
217  font-size: 1.125rem;
218}
219header nav ul {
220  width: 100%;
221  padding: 0;
222  list-style: none;
223  margin: 0;
224  display: -webkit-box;
225  display: -ms-flexbox;
226  display: flex;
227  -webkit-box-pack: justify;
228  -ms-flex-pack: justify;
229  justify-content: space-between;
230}
231header nav ul li a {
232  padding: 0;
233  color: rgba(255, 255, 255, 0.5);
234  text-decoration: none;
235}
236
237main {
238  padding-top: 5vh;
239  font-size: 1.125rem;
240  line-height: 1.5;
241  color: #222;
242  padding-bottom: 5vh;
243}
244main > * {
245  width: 80vw;
246  margin-left: auto;
247  margin-right: auto;
248  max-width: 50rem;
249}
250main * {
251  margin-top: 0;
252}
253main * + * {
254  margin-top: 1.5rem;
255  margin-bottom: 0;
256}
257main h2,
258main h3 {
259  font-family: 'HaboroSerif-NorDem';
260  font-weight: 400;
261  margin-bottom: 0;
262  letter-spacing: -0.03em;
263}
264main h2 {
265  color: #222;
266  font-size: 2.4rem;
267  line-height: 1.1;
268}
269@media screen and (min-width: 62rem) {
270  main h2 {
271    font-size: 2.5rem;
272  }
273}
274main h3 {
275  color: #222;
276  line-height: 1.1;
277  font-size: 2rem;
278}
279main h3 a,
280main h2 a {
281  border-color: transparent;
282}
283main .meta {
284  opacity: 1;
285  font-size: 1rem;
286  margin-top: 0;
287  color: #6d6e68;
288}
289main a {
290  color: #597530;
291  text-decoration: none;
292  border-bottom: 1px solid rgba(185, 59, 46, 0.6);
293}
294main .recent-articles {
295  position: relative;
296}
297main .recent-articles:before,
298main .recent-articles:after {
299  content: ' ';
300  display: block;
301  width: 10vw;
302  margin: 3rem auto;
303  height: 1px;
304  background: rgba(0, 0, 0, 0.3);
305}
306@media screen and (min-width: 40rem) {
307  main .recent-articles .posts {
308    display: -webkit-box;
309    display: -ms-flexbox;
310    display: flex;
311    -webkit-box-pack: justify;
312    -ms-flex-pack: justify;
313    justify-content: space-between;
314    -ms-flex-wrap: wrap;
315    flex-wrap: wrap;
316    margin-left: -0.5rem;
317    margin-right: -0.5rem;
318  }
319  main .recent-articles .posts .post {
320    flex: 1 0 48%;
321    margin: 0 0.5rem;
322  }
323  main .recent-articles .posts .post:nth-child(3) {
324    margin-top: 3rem;
325  }
326}
327main .recent-articles .post {
328  vertical-align: top;
329  width: auto;
330  margin-bottom: 3rem;
331  margin-top: 0;
332}
333main .recent-articles .post .meta {
334  margin-top: 0;
335  font-size: 0.85rem;
336  opacity: 1;
337  color: #6d6e68;
338}
339#mc_embed_signup form .response {
340  margin-top: 0;
341  text-align: center;
342}
343#codefund {
344  margin: 0.5rem auto;
345}
346@media (min-width: 45rem) {
347  #codefund {
348    float: right;
349    max-width: 330px;
350    margin: 1.7rem 1rem 0;
351  }
352}
353#codefund a {
354  border-bottom: 0;
355}</style><link rel="stylesheet" media="print" href="https://kilianvalkhof.com/wp-content/cache/autoptimize/css/autoptimize_3b1bcd9bcca88fa6f458f4832bbdfc0a.css" onload="this.onload=null;this.media='all';"><noscript id="aonoscrcss"><link media="all" href="https://kilianvalkhof.com/wp-content/cache/autoptimize/css/autoptimize_3b1bcd9bcca88fa6f458f4832bbdfc0a.css" rel="stylesheet"></noscript><title>My take on a link to a random post with only HTML/CSS | Kilian Valkhof</title><meta name="robots" content="max-image-preview:large" /><meta name="author" content="Kilian Valkhof"/><link rel="canonical" href="https://kilianvalkhof.com/2026/css-html/my-take-on-a-link-to-a-random-post-with-only-html-css/" /><meta name="generator" content="All in One SEO (AIOSEO) 5.0.2" /><meta property="og:locale" content="en_US" /><meta property="og:site_name" content="Kilian Valkhof | Front-end &amp; user experience developer" /><meta property="og:type" content="article" /><meta property="og:title" content="My take on a link to a random post with only HTML/CSS | Kilian Valkhof" /><meta property="og:url" content="https://kilianvalkhof.com/2026/css-html/my-take-on-a-link-to-a-random-post-with-only-html-css/" /><meta property="og:image" content="https://kilianvalkhof.com/wp-content/uploads/og.jpg" /><meta property="og:image:secure_url" content="https://kilianvalkhof.com/wp-content/uploads/og.jpg" /><meta property="article:published_time" content="2026-08-19T15:23:25+00:00" /><meta property="article:modified_time" content="2026-08-20T08:15:03+00:00" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:site" content="@kilianvalkhof" /><meta name="twitter:title" content="My take on a link to a random post with only HTML/CSS | Kilian Valkhof" /><meta name="twitter:creator" content="@kilianvalkhof" /><meta name="twitter:image" content="https://kilianvalkhof.com/wp-content/uploads/og.jpg" /><meta name="twitter:label1" content="Written by" /><meta name="twitter:data1" content="Kilian Valkhof" /><meta name="twitter:label2" content="Est. reading time" /><meta name="twitter:data2" content="3 minutes" /> 
355<script type="application/ld+json" class="aioseo-schema">{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kilianvalkhof.com\/2026\/css-html\/my-take-on-a-link-to-a-random-post-with-only-html-css\/#article","name":"My take on a link to a random post with only HTML\/CSS | Kilian Valkhof","headline":"My take on a link to a random post with only HTML\/CSS","author":{"@id":"https:\/\/kilianvalkhof.com\/author\/admin\/#author"},"publisher":{"@id":"https:\/\/kilianvalkhof.com\/#person"},"image":{"@type":"ImageObject","@id":"https:\/\/kilianvalkhof.com\/2026\/css-html\/my-take-on-a-link-to-a-random-post-with-only-html-css\/#articleImage","url":"https:\/\/secure.gravatar.com\/avatar\/d58b517f3d4fc5660c385b6db0b97f394951c36e27ea1aee738564f746818329?s=96&d=identicon&r=pg","width":96,"height":96,"caption":"Kilian Valkhof"},"datePublished":"2026-08-19T17:23:25+02:00","dateModified":"2026-08-20T10:15:03+02:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/kilianvalkhof.com\/2026\/css-html\/my-take-on-a-link-to-a-random-post-with-only-html-css\/#webpage"},"isPartOf":{"@id":"https:\/\/kilianvalkhof.com\/2026\/css-html\/my-take-on-a-link-to-a-random-post-with-only-html-css\/#webpage"},"articleSection":"CSS &amp; HTML"},{"@type":"BreadcrumbList","@id":"https:\/\/kilianvalkhof.com\/2026\/css-html\/my-take-on-a-link-to-a-random-post-with-only-html-css\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/kilianvalkhof.com\/#listItem","position":1,"name":"Home","item":"https:\/\/kilianvalkhof.com\/","nextItem":{"@type":"ListItem","@id":"https:\/\/kilianvalkhof.com\/category\/css-html\/#listItem","name":"CSS &amp; HTML"}},{"@type":"ListItem","@id":"https:\/\/kilianvalkhof.com\/category\/css-html\/#listItem","position":2,"name":"CSS &amp; HTML","item":"https:\/\/kilianvalkhof.com\/category\/css-html\/","nextItem":{"@type":"ListItem","@id":"https:\/\/kilianvalkhof.com\/2026\/css-html\/my-take-on-a-link-to-a-random-post-with-only-html-css\/#listItem","name":"My take on a link to a random post with only HTML\/CSS"},"previousItem":{"@type":"ListItem","@id":"https:\/\/kilianvalkhof.com\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/kilianvalkhof.com\/2026\/css-html\/my-take-on-a-link-to-a-random-post-with-only-html-css\/#listItem","position":3,"name":"My take on a link to a random post with only HTML\/CSS","previousItem":{"@type":"ListItem","@id":"https:\/\/kilianvalkhof.com\/category\/css-html\/#listItem","name":"CSS &amp; HTML"}}]},{"@type":"Person","@id":"https:\/\/kilianvalkhof.com\/#person","name":"Kilian Valkhof","image":{"@type":"ImageObject","@id":"https:\/\/kilianvalkhof.com\/2026\/css-html\/my-take-on-a-link-to-a-random-post-with-only-html-css\/#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/d58b517f3d4fc5660c385b6db0b97f394951c36e27ea1aee738564f746818329?s=96&d=identicon&r=pg","width":96,"height":96,"caption":"Kilian Valkhof"}},{"@type":"Person","@id":"https:\/\/kilianvalkhof.com\/author\/admin\/#author","url":"https:\/\/kilianvalkhof.com\/author\/admin\/","name":"Kilian Valkhof","image":{"@type":"ImageObject","@id":"https:\/\/kilianvalkhof.com\/2026\/css-html\/my-take-on-a-link-to-a-random-post-with-only-html-css\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d58b517f3d4fc5660c385b6db0b97f394951c36e27ea1aee738564f746818329?s=96&d=identicon&r=pg","width":96,"height":96,"caption":"Kilian Valkhof"}},{"@type":"WebPage","@id":"https:\/\/kilianvalkhof.com\/2026\/css-html\/my-take-on-a-link-to-a-random-post-with-only-html-css\/#webpage","url":"https:\/\/kilianvalkhof.com\/2026\/css-html\/my-take-on-a-link-to-a-random-post-with-only-html-css\/","name":"My take on a link to a random post with only HTML\/CSS | Kilian Valkhof","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/kilianvalkhof.com\/#website"},"breadcrumb":{"@id":"https:\/\/kilianvalkhof.com\/2026\/css-html\/my-take-on-a-link-to-a-random-post-with-only-html-css\/#breadcrumblist"},"author":{"@id":"https:\/\/kilianvalkhof.com\/author\/admin\/#author"},"creator":{"@id":"https:\/\/kilianvalkhof.com\/author\/admin\/#author"},"datePublished":"2026-08-19T17:23:25+02:00","dateModified":"2026-08-20T10:15:03+02:00"},{"@type":"WebSite","@id":"https:\/\/kilianvalkhof.com\/#website","url":"https:\/\/kilianvalkhof.com\/","name":"Kilian Valkhof","description":"Front-end & user experience developer","inLanguage":"en-US","publisher":{"@id":"https:\/\/kilianvalkhof.com\/#person"}}]}</script>
355 <meta name="description" content="Chris Coyier recently posted about creating a &#8220;random post&#8221; link on a site that would link to a different URL using only HTML/CSS: A Button That Links to a Random Post in HTML &amp; CSS Only . Here&#8217;s my take on that. I saw that article and it reminded me of one of the random() [&hellip;]" /><link href='https://fonts.gstatic.com' crossorigin='anonymous' rel='preconnect' /><link href='https://ajax.googleapis.com' rel='preconnect' /><link href='https://fonts.googleapis.com' rel='preconnect' /><link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://kilianvalkhof.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fkilianvalkhof.com%2F2026%2Fcss-html%2Fmy-take-on-a-link-to-a-random-post-with-only-html-css%2F" /><link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://kilianvalkhof.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fkilianvalkhof.com%2F2026%2Fcss-html%2Fmy-take-on-a-link-to-a-random-post-with-only-html-css%2F&#038;format=xml" /><link rel="https://api.w.org/" href="https://kilianvalkhof.com/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://kilianvalkhof.com/wp-json/wp/v2/posts/3498" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://kilianvalkhof.com/xmlrpc.php?rsd" /><link rel='shortlink' href='https://wp.me/pfyxL-Uq' /><link rel="site.standard.document" href="at://did:plc:z6uec3g7xgkvxpy442663waq/site.standard.document/3mtgzy5er2dz5" /><link rel="site.standard.publication" href="at://did:plc:z6uec3g7xgkvxpy442663waq/site.standard.publication/3mnr7ovitrasj" /><meta name="at:canonical" content="at://did:plc:z6uec3g7xgkvxpy442663waq/site.standard.document/3mtgzy5er2dz5" /><meta name="at:alternate" content="at://did:plc:z6uec3g7xgkvxpy442663waq/site.standard.publication/3mnr7ovitrasj" /><meta name="at:alternate" content="at://did:plc:z6uec3g7xgkvxpy442663waq/app.bsky.feed.post/3mtgzy5fnucz5" /></head><body><header><div><h1> <a href="/">Kilian Valkhof</a></h1><h2>Building tools that make developers awesome.</h2><form method="get" action="https://kilianvalkhof.com/"><fieldset> <label for="s">Search term</label> <input type="text" value="" name="s" id="s" placeholder="Search..."> <button type="submit">Search</button></fieldset></form><nav><ul><li><a href="/">Blog</a></li><li><a href="/about/">About</a></li><li><a href="/speaking/">Speaking</a></li><li><a href="/projects/">Projects</a></li><li><a href="/contact/">Contact</a></li></ul></nav></div></header><main><h2>My take on a link to a random post with only HTML/CSS</h2><div class="meta"> <a href="https://kilianvalkhof.com/category/css-html/" rel="category tag">CSS &amp; HTML</a>, 
356 19 August 2026, <span class="span-reading-time rt-reading-time"><span class="rt-label rt-prefix"></span> <span class="rt-time"> 3</span> <span class="rt-label rt-postfix">minute read</span></span></div><div id="codefund" data-ea-publisher="kilianvalkhof" data-ea-type="image"></div><p>Chris Coyier recently posted about creating a &#8220;random post&#8221; link on a site that would link to a different URL using only HTML/CSS: <a href="https://master.dev/blog/a-button-that-links-to-a-random-post-in-html-css-only/">A Button That Links to a Random Post in HTML &amp; CSS Only </a>. Here&#8217;s my take on that.<span id="more-3498"></span></p><p>I saw that article and it reminded me of <a href="https://polypane.app/blog/experimenting-with-the-new-pure-css-random-function/#designing-a-poem-with-random-item">one of the random() examples I made</a>, a poem where I toggle between discrete values using <code>if()</code>. So I shot off this post but as I was about to go on holiday, I left it at that:</p><blockquote style="margin:0 auto" class="bluesky-embed" data-bluesky-uri="at://did:plc:z6uec3g7xgkvxpy442663waq/app.bsky.feed.post/3mrulg67s4c22" data-bluesky-cid="bafyreig4ugvpy7nijlafvkqgtiy33mfzztpkvywzcbz5wb5sc453ynbf74" data-bluesky-embed-color-mode="system"><p lang="en">This article is pretty fun. I&#x27;d solve it with a bunch of stacked links, then have a registered custom property that uses random() to set an int between 0 and number-of-links, then use that in an if() function to display:block one link (matching the randomly chosen int)</p><p>master.dev/blog/a-butto&#8230;</p><p><a href="https://bsky.app/profile/did:plc:z6uec3g7xgkvxpy442663waq/
356post/3mrulg67s4c22?ref_src=embed">[image or embed]</a></p><p>&mdash; Kilian Valkhof (<a href="https://bsky.app/profile/did:plc:z6uec3g7xgkvxpy442663waq?ref_src=embed">@kilianvalkhof.com</a>) <a href="https://bsky.app/profile/did:plc:z6uec3g7xgkvxpy442663waq/post/3mrulg67s4c22?ref_src=embed">July 30, 2026 at 3:49 PM</a></p></blockquote><p>
356<script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>
356</p><p>Well, I&#8217;m back now and I figured I&#8217;d do something with this blog again and show you my implementation! It is very similar to the poem example I mentioned earlier, but uses <code>sibling-index()</code> and <code>sibling-count()</code> as the inputs for determining which link to show.</p><p>Here&#8217;s a Codepen (no fallback for browsers without support, go open this page in <a href="https://polypane.app">Polypane</a>)</p><p><iframe height="300" style="width: 100%;" scrolling="no" title="my take on 'a link to a random post in just HTML/CSS'" src="https://codepen.io/editor/Kilian/embed/01a01a82-4a7c-77e2-ba88-cdcea9a457b8?default-tab=css%2Cresult&#038;theme-id=-3" frameborder="no" loading="lazy" allowtransparency="true"><br /> See the Pen <a href="https://codepen.io/editor/Kilian/pen/01a01a82-4a7c-77e2-ba88-cdcea9a457b8"><br /> my take on &#8216;a link to a random post in just HTML/CSS&#8217;</a> by Kilian Valkhof (<a href="https://codepen.io/Kilian">@Kilian</a>)<br /> on <a href="https://codepen.io">CodePen</a>.<br /> </iframe></p><p>And here&#8217;s a quick video showing the result in Polypane:</p><div style="width: 640px;" class="wp-video"><video class="wp-video-shortcode" id="video-3498-1" width="640" height="360" preload="metadata" controls="controls"><source type="video/mp4" src="https://kilianvalkhof.com/wp-content/uploads/randomlink-2026-08-20_10.09.44.mp4?_=1" /><a href="https://kilianvalkhof.com/wp-content/uploads/randomlink-2026-08-20_10.09.44.mp4">https://kilianvalkhof.com/wp-content/uploads/randomlink-2026-08-20_10.09.44.mp4</a></video></div><h3 id="more-details-on-the-implementation">More details on the implementation <a class="deep-link" href="#more-details-on-the-implementation">#</a></h3><p>For the HTML, it&#8217;s just a bunch of links directly in the body tag. As long as they&#8217;re all siblings we&#8217;re good. Contrary to my post, if we just hide all but one link we don&#8217;t really need them all to be stacked in one grid-area, so I decided to skip that part for clarity.</p><p>The full CSS is pretty small:</p><pre><code>@property --discrete-number {
357  syntax: "<integer>";
358  inherits: true;
359  initial-value: 0;
360}
361
362a {
363  --discrete-number: random(--link, 1, sibling-count(), 1);
364  display: if(
365    style(--discrete-number: sibling-index()): block; 
366    else: none;
367  );
368}</code></pre><p>There&#8217;s really three pertinent details to my implementation:</p><h4 id="an-integer-cast-random-value">An integer-cast random value <a class="deep-link" href="#an-integer-cast-random-value">#</a></h4><p>I register a custom property as an integer so that I can use it to compare to other integers:</p><pre><code>@property --discrete-number {
369  syntax: "<integer>";
370  inherits: true;
371  initial-value: 0;
372}</code></pre><p>Without this, the type of the random number and sibling-count() are different, and the comparison never returns true.</p><h4 id="getting-a-random-number-between-1-and-the-total-number-of-links">Getting a random number between 1 and the total number of links <a class="deep-link" href="#getting-a-random-number-between-1-and-the-total-number-of-links">#</a></h4><p>I declare the <code>--discrete-number</code> value on the <code>&lt;a&gt;</code> itself, and use a custom ident (<code>--link</code>) so that we get a single value shared across all the elements:</p><pre><code>a {
373  --discrete-number: random(--link, 1, sibling-count(), 1);
374}</code></pre><p>1 is the minimum value, sibling-count() is the maximum value, and the last 1 is the step size, so that we only get round numbers (cast to integer). This means that on every page refresh, <code>--discrete-number</code> is a value between 1 and the total number of links.</p><h4 id="using-the-random-number-to-show-and-hide">Using the random number to show and hide <a class="deep-link" href="#using-the-random-number-to-show-and-hide">#</a></h4><p>Lastly, I use an <code>if()</code> function to compare the <code>--discrete-number</code> to the current <code>sibling-count()</code>. If it matches, we show the element and if not, we hide it.</p><pre><code>a {
375  display: if(
376    style(--discrete-number: sibling-index()): block; 
377    else: none;
378  );
379}</code></pre><p>Since the value of <code>--discrete-number</code> is the same for all links, and there&#8217;s only ever one element that has a matching sibling-index, we end up with a single randomly chosen visible link that&#8217;s different on each page refresh.</p><p>If you want to learn more about <code>random()</code> in CSS, check out my deep dive over on the Polypane blog: <a href="https://polypane.app/blog/experimenting-with-the-new-pure-css-random-function/">Experimenting with the new pure CSS Random function</a>.</p><div class="social"><div><p> <a class="icon" href="https://polypane.app"><img width="128" height="128" loading="lazy" src="/wp-content/uploads/icon-256x256-1.png" alt="Polypane browser for responsive web development and design"></a> Hi, I'm Kilian. I make <strong><a href="https://polypane.app">Polypane</a>, the 
380 browser for responsive web development and design</strong>. If you're reading this site, that's probably 
381 interesting to you. <a href="https://polypane.app">Try it out!</a></p></div></div><div class='yarpp yarpp-related yarpp-related-website yarpp-template-yarpp-template-example'><section class="other-articles"><h3>Related Posts</h3><div class="posts"><div class="post"> <a href="https://kilianvalkhof.com/2023/css-html/the-gotchas-of-css-nesting/" rel="bookmark norewrite" title="The gotchas of CSS Nesting" >The gotchas of CSS Nesting</a><div class="meta"> 13 June 2023, <span class="span-reading-time rt-reading-time"><span class="rt-label rt-prefix"></span> <span class="rt-time"> 3</span> <span class="rt-label rt-postfix">minute read</span></span></div><p><p>I&#39;ve written before about the problems you can run into with CSS nesting (keep in mind that article uses an older syntax but the point still stands) and the question that @ChallengeCSS tweeted out today made me realize there&#39;s actually a few more gotcha&#39;s.</p></p></div><div class="post"> <a href="https://kilianvalkhof.com/2023/css-html/backdrop-doesnt-inherit-from-anywhere/" rel="bookmark norewrite" title="::backdrop doesn&#8217;t inherit from anywhere" >::backdrop doesn&#8217;t inherit from anywhere</a><div class="meta"> 19 January 2023, <span class="span-reading-time rt-reading-time"><span class="rt-label rt-prefix"></span> <span class="rt-time"> 2</span> <span class="rt-label rt-postfix">minute read</span></span></div><p><p>Earlier this month I was <a href='https://github.com/captainbrosset/devtools-tips/pull/48'>implementing a lightbox for devtoolstips.org</a> using <code>&lt;dialog&gt;</code>. I&#39;ll be writing about that soon but you can find the implementation in that link, it&#39;s remarkable how little code you need. While styling, I made use of the CSS custom properties that where already defined in the CSS to style the dialog and it&#39;s backdrop. Or so I thought.</p></p></div></div></section></div></main> 
381<script>// manual load because of turbolinks
382ethicalads.load()</script>
382 <footer><div><div class="column"><h3>Categories</h3><ul><li class="cat-item cat-item-7"><a href="https://kilianvalkhof.com/category/accessibility/">Accessibility</a> (10)</li><li class="cat-item cat-item-13"><a href="https://kilianvalkhof.com/category/apps/">Apps</a> (11)</li><li class="cat-item cat-item-14"><a href="https://kilianvalkhof.com/category/chatbots/">Chatbots</a> (4)</li><li class="cat-item cat-item-3"><a href="https://kilianvalkhof.com/category/css-html/">CSS &amp; HTML</a> (76)</li><li class="cat-item cat-item-1"><a href="https://kilianvalkhof.com/category/design/">Design</a> (19)</li><li class="cat-item cat-item-15"><a href="https://kilianvalkhof.com/category/electron/">Electron</a> (8)</li><li class="cat-item cat-item-8"><a href="https://kilianvalkhof.com/category/javascript/">Javascript</a> (22)</li><li class="cat-item cat-item-5"><a href="https://kilianvalkhof.com/category/life/">Life</a> (20)</li><li class="cat-item cat-item-11"><a href="https://kilianvalkhof.com/category/linux/">Linux</a> (2)</li><li class="cat-item cat-item-9"><a href="https://kilianvalkhof.com/category/sencss/">SenCSs</a> (6)</li><li class="cat-item cat-item-2"><a href="https://kilianvalkhof.com/category/web/">Web</a> (39)</li><li class="cat-item cat-item-10"><a href="https://kilianvalkhof.com/category/wordpress/">Wordpress</a> (1)</li></ul></div><div class="column"><h3>Social</h3><div class="textwidget"><ul><li><a href="https://bsky.app/profile/kilianvalkhof.com" rel="me">Bluesky</a></li><li><a href="https://mastodon.social/@Kilian" rel="me">Mastodon</a></li><li><a href="https://github.com/kilian" rel="me" >GitHub</a></li><li><a href="https://www.linkedin.com/in/kilianvalkhof" rel="me">Linkedin</a></li><li><a href="https://ko-fi.com/kilian">Ko-fi</a></li><li><a href="https://news.ycombinator.com/user?id=kilian" rel="me" >Hacker news</a></li></ul></div></div><p>&copy; 2006 &ndash; 2026  Kilian Valkhof. Articles available for redistribution under <a href="/licence/">licence</a>.</div></footer> 
382<script type="speculationrules">{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/kvsixteen/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}</script>
382 
382<script id="jetpack-stats-js-before">_stq = window._stq || [];
383_stq.push([ "view", {"v":"ext","blog":"3707709","post":"3498","tz":"2","srv":"kilianvalkhof.com","j":"1:16.2"} ]);
384_stq.push([ "clickTrackerInit", "3707709", "3498" ]);
385//# sourceURL=jetpack-stats-js-before</script>
385 
385<script data-wp-strategy="defer" defer fetchpriority="low" id="jetpack-stats-js" src="https://stats.wp.com/e-202640.js"></script>
385 
385<script id="jquery-core-js" src="https://kilianvalkhof.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1"></script>
385 
385<script id="mediaelement-core-js-before">var mejsL10n = {"language":"en","strings":{"mejs.download-file":"Download File","mejs.install-flash":"You are using a browser that does not have Flash player enabled or installed. Please turn on your Flash player plugin or download the latest version from https://get.adobe.com/flashplayer/","mejs.fullscreen":"Fullscreen","mejs.play":"Play","mejs.pause":"Pause","mejs.time-slider":"Time Slider","mejs.time-help-text":"Use Left/Right Arrow keys to advance one second, Up/Down arrows to advance ten seconds.","mejs.live-broadcast":"Live Broadcast","mejs.volume-help-text":"Use Up/Down Arrow keys to increase or decrease volume.","mejs.unmute":"Unmute","mejs.mute":"Mute","mejs.volume-slider":"Volume Slider","mejs.video-player":"Video Player","mejs.audio-player":"Audio Player","mejs.captions-subtitles":"Captions/Subtitles","mejs.captions-chapters":"Chapters","mejs.none":"None","mejs.afrikaans":"Afrikaans","mejs.albanian":"Albanian","mejs.arabic":"Arabic","mejs.belarusian":"Belarusian","mejs.bulgarian":"Bulgarian","mejs.catalan":"Catalan","mejs.chinese":"Chinese","mejs.chinese-simplified":"Chinese (Simplified)","mejs.chinese-traditional":"Chinese (Traditional)","mejs.croatian":"Croatian","mejs.czech":"Czech","mejs.danish":"Danish","mejs.dutch":"Dutch","mejs.english":"English","mejs.estonian":"Estonian","mejs.filipino":"Filipino","mejs.finnish":"Finnish","mejs.french":"French","mejs.galician":"Galician","mejs.german":"German","mejs.greek":"Greek","mejs.haitian-creole":"Haitian Creole","mejs.hebrew":"Hebrew","mejs.hindi":"Hindi","mejs.hungarian":"Hungarian","mejs.icelandic":"Icelandic","mejs.indonesian":"Indonesian","mejs.irish":"Irish","mejs.italian":"Italian","mejs.japanese":"Japanese","mejs.korean":"Korean","mejs.latvian":"Latvian","mejs.lithuanian":"Lithuanian","mejs.macedonian":"Macedonian","mejs.malay":"Malay","mejs.maltese":"Maltese","mejs.norwegian":"Norwegian","mejs.persian":"Persian","mejs.polish":"Polish","mejs.portuguese":"Portuguese","mejs.romanian":"Romanian","mejs.russian":"Russian","mejs.serbian":"Serbian","mejs.slovak":"Slovak","mejs.slovenian":"Slovenian","mejs.spanish":"Spanish","mejs.swahili":"Swahili","mejs.swedish":"Swedish","mejs.tagalog":"Tagalog","mejs.thai":"Thai","mejs.turkish":"Turkish","mejs.ukrainian":"Ukrainian","mejs.vietnamese":"Vietnamese","mejs.welsh":"Welsh","mejs.yiddish":"Yiddish"}};
386//# sourceURL=mediaelement-core-js-before</script>
386 
386<script id="mediaelement-js-extra">var _wpmejsSettings = {"pluginPath":"/wp-includes/js/mediaelement/","classPrefix":"mejs-","stretching":"responsive","audioShortcodeLibrary":"mediaelement","videoShortcodeLibrary":"mediaelement"};
387//# sourceURL=mediaelement-js-extra</script>
387 
387<script defer src="https://kilianvalkhof.com/wp-content/cache/autoptimize/js/autoptimize_3685c601ca4a72b1caa5308e3f887347.js"></script>
387<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"25148d1c8ec04ed38c24e9debd183a1a","r":1,"spa":2}' crossorigin="anonymous"></script>
387
388</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.