如何在 HTML 中设置 aria 标签元素的样式

Question

当您将鼠标悬停在按钮上时，我正在尝试为按钮制作一个更好看的标签，我想知道如何设置 aria-label 元素的样式，使其看起来像我在下面添加的这个屏幕截图。

.

Answer 1

您可以为此使用 CSS 属性选择器。

[aria-label] {
position: relative;
}

[aria-label="Search by voice"]:after {
content: attr(aria-label);
/* Your CSS here, this is just a random one for demonstration */
display: none;
position: absolute;
top: 110%;
left: 10px;
z-index: 5000;
pointer-events: none;
padding: 8px 10px;
line-height: 15px;
white-space: nowrap;
text-decoration: none;
text-indent: 0;
overflow: visible;
font-size: .9em;
font-weight: normal;
color: #fff;
text-shadow: 1px 0 1px #888;
background-color: #412917;
border-left: 6px solid #d37092;
border-radius: 2px;
box-shadow: 1px 2px 6px rgba(0,0,0,0.3);
}

a:focus {
  outline:1px dashed #E92C6C;
}

[aria-label]:hover:after, [aria-label]:focus:after {
display: block;
}

如何在 HTML 中设置 aria 标签元素的样式

How do I style the aria label element in HTML

html

css

label