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 & 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 & 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 & HTML"}},{"@type":"ListItem","@id":"https:\/\/kilianvalkhof.com\/category\/css-html\/#listItem","position":2,"name":"CSS & 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 & 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 “random post” 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 & CSS Only . Here’s my take on that. I saw that article and it reminded me of one of the random() […]" /><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&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 & 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 “random post” 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 & CSS Only </a>. Here’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'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…</p><p><a href="https://bsky.app/profile/did:plc:z6uec3g7xgkvxpy442663waq/
356post/3mrulg67s4c22?ref_src=embed">[image or embed]</a></p><p>— 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’m back now and I figured I’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’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&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 ‘a link to a random post in just HTML/CSS’</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’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’s just a bunch of links directly in the body tag. As long as they’re all siblings we’re good. Contrary to my post, if we just hide all but one link we don’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’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><a></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’s only ever one element that has a matching sibling-index, we end up with a single randomly chosen visible link that’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'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's actually a few more gotcha'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’t inherit from anywhere" >::backdrop doesn’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><dialog></code>. I'll be writing about that soon but you can find the implementation in that link, it'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'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 & 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>© 2006 – 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.