[Recommended tutorial: CSS video tutorial]
Pure CSS to implement tooltip, css changes the title style of the html tag [The author will update when he has time Some boundary conditions. The current style is problematic in extreme cases. Please do not copy the code directly to the online environment. This is just a small demo written by the author]
html code:
The following code is available directly, and the style of tootip can be debugged by yourself.
<!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>For more programming-related knowledge, please visit: Programming Teaching! !
The above is the detailed content of How to modify the title style of html tag with css? (code example). For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
