html中如何在标题中加样式,HTML标题属性样式

https://jsfiddle.net/LvjaxLfn/

This is a test

span:hover {

position: relative;

}

span[title]:hover:after {

content: attr(title);

padding: 4px 8px;

position: absolute;

left: 0;

top: 100%;

white-space: nowrap;

z-index: 20;

background:red;

}

2017年12月14日更新

出现这个显示2个标题,另一个可能是：

This is a test

span:hover {

position: relative;

}

span[aria-label]:hover:after {

content: attr(aria-label);

padding: 4px 8px;

position: absolute;

left: 0;

top: 100%;

white-space: nowrap;

z-index: 20;

background:red;

}

使用aria标签来保持可访问性

您还可以添加转换延迟,使其在像本机html标题之类的延迟后显示

span {

position: relative;

cursor: pointer;

}

span[aria-label]:after {

opacity:0;

content: attr(aria-label);

padding: 4px 8px;

position: absolute;

left: 0;

top: 100%;

white-space: nowrap;

z-index: 20;

background:red;

transition: opacity 0.5s;

pointer-events:none;

}

span[aria-label]:hover:after {

opacity:1;

transition-delay:1.5s;

}