所属分类:web前端开发
前端(vue)入门到精通课程:进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用
【推荐教程:CSS视频教程 】
纯CSS实现tooltip,css更改html标签的title样式【笔者有时间会更新一些边界条件。目前的样式在极端情况是有问题的,请不要直接将代码copy到线上环境,这只是笔者写的一个小demo】
html代码:
以下代码直接可用,tootip的样式可以自己调试。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box {
display: flex;
justify-content: center;
align-items: center;
}
span {
position: relative;
margin: 50px auto;
border: 1px solid;
}
span[aria-label]:hover:after {
content: attr(aria-label);
position: absolute;
bottom: -30px;
left: 0;
border: 1px solid;
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<span aria-label="我是tooltip">我是主体内容啊</span>
</div>
</body>
</html>
登录后复制
更多编程相关知识,请访问:编程教学!!
以上就是css如何修改html标签的title样式?(代码示例)的详细内容,更多请关注zzsucai.com其它相关文章!