Button with aria-label

HTML

<h1>Button with pop-over aria-label</h1>
<p>A quick and dirty demonstration showing how to display the aria-label
information of a button on hover and focus.</p>

<div class="button-container">
  <button class="button" type="button" aria-label="Additional information
  about button">Some text</button>
</div>

<p>An example where this could be used?</p>

<div class="button-container">
  <button class="button" type="button" aria-label="Close and return to Bank
  Balance information">Close</button>
</div>

CSS

/* general rules */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 20px;
  color: #333;
  background: #fff;
  font: 1em/1.2 helvetica, arial, sans-serif;
}

h1 {
  margin: 0;
  font-size: 1.4em;
}

/* button rules */

.button-container {
  position: relative;
}

.button {
  border: 1px solid #ccc;
  border-radius: .2em;
  padding: .5em 1em;
  color: #069;
  background: #fff;
  font-family: inherit;
  font-size: 1em;
}

.button:focus,
.button:hover {
  color: #000;
  background: #efefef;
}

button[aria-label]:focus:after,
button[aria-label]:hover:after {
  position: absolute;
  z-index: 1;
  top: -92%;
  left: 0;
  display: block;
  border-radius: .2em;
  padding: .5em .7em;
  content: attr(aria-label);
  color: #fff;
  background: #000;
  font-size: .875em;
  text-align: left;
}