首頁 > 文章 > web前端 > css如何修改html標籤的title樣式？（程式碼範例）

css如何修改html標籤的title樣式？（程式碼範例）

青灯夜游轉載: 2021-02-19 10:00:157253瀏覽

#純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中文網其他相關文章！

css html copy

陳述：

本文轉載於：csdn.net。如有侵權，請聯絡admin@php.cn刪除

上一篇：css id選擇器怎麼寫下一篇：css id選擇器怎麼寫

看更多

css如何修改html標籤的title樣式？ （程式碼範例）

相關文章

css如何修改html標籤的title樣式？（程式碼範例）