How to create the = and + key with kbd tag?

Question

+ or += can't create the following key.

[

How to create a key gui which chracter + is at the top of character = with kbd tag or something else?

Answer 1

I had to give this a try using a pure-CSS solution.

So here's the HTML, only tweaked with a plus-equals classname so that we can single it out with a CSS selector, and then a bunch of CSS styles to make it look like a two-line plus/equals key:

kbd.plus-equals {
  display: inline-block;
  background: #FFF;
  color: #FFF;
  font-size: 1px;
  border: 1px solid #999;
  border-radius: 4px;
  box-shadow: 1px 2px 3px #999;
  width: 28px;
  height: 28px;
  overflow: visible;
}

kbd.plus-equals:after {
  content: "+\0a=";
  color: #666;
  display: block;
  font-size: 16px;
  text-align: center;
  line-height: 12px;
  width: 16px;
  position: relative;
  top: 0;
  left: 6px;
}

Please type the <kbd class='plus-equals'>+=</kbd> key.

How does this work? By totally cheating!

The first set of CSS declarations hide the original "+=" content by shrinking it down to almost nothing, and then rendering it as white on a white background. They also add a nice border and box shadow so that it looks like a keyboard key.

The second set of CSS declarations inject replacement content after the original content: The replacement content has "+" and "=" on separate lines, and is carefully formatted to line up over top of the original key-shaped rectangle.

It's a hacky, cool way to make proper, clean, semantic HTML markup into something that looks like the desired result, without needing any JavaScript to clean it up after the fact.