• 技术文章 >web前端 >css教程

    css如何修改html标签的title样式?(代码示例)

    青灯夜游青灯夜游2021-02-19 10:00:15转载104

    【推荐教程: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样式?(代码示例)的详细内容,更多请关注php中文网其它相关文章!

    本文转载于:csdn,如有侵犯,请联系a@php.cn删除
    专题推荐:css title样式
    上一篇:css id选择器怎么写 下一篇:看看CSS中的那些背景图片函数!
    第15期线上培训班

    相关文章推荐

    • 详解css z-index的权重问题• CSS Modules是啥子东西?一起来了解一下!• 详细了解CSS3中的border-image-slice属性• 浅谈CSS3 Grid网格布局(display: grid)的用法• 浅谈css布局中负margin的使用方法

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网