I’ve had a really productive day working on the typography for a client’s site, and along the way I found myself giving the much-overlooked <kbd> element a bit of a spruce-up.

Not that the client will likely be using the element much, but the thought struck me I hadn’t really done anything much to style it on this site and I use it a lot. It denotes input into a computer, and I use it every time I’m writing up a homelab project here.

So I knocked out this brief little styleset. Accuracy not guaranteed, especially the cursors.

ipconfig /all

sudo apt update

mdfind kMDItemAppStoreHasReceipt=1

CSS follows:

kbd {
    font-family: 'Courier', monospace;
    word-wrap: break-word;
    color: #f0f0f0;
    background-color: #222;
    padding: 0.25em;
}
kbd:before {
 
}
kbd.cmd:before {
    content: "> ";
}
kbd.bash:before {
    content: "$ ";
    color: #5fff00;
}
kbd.zsh:before {
    content: "% ";
}
kbd:after {
    animation: opacityAnim 0.65s infinite linear;
}
kbd.cmd:after,
kbd.bash:after {
    content: "_";   
    font-weight: bold;
}
kbd.zsh:after {
    content: "▮";
}