CSS伪元素:after|::after实现提示效果

最新推荐文章于 2023-12-15 09:13:53 发布

雾里看花叹朦胧

最新推荐文章于 2023-12-15 09:13:53 发布

阅读量874

点赞数

分类专栏： css3 文章标签： CSS 伪元素获取伪元素伪元素的样式 css实现提示效果

本文链接：https://blog.csdn.net/hsl0530hsl/article/details/105335634

版权

本文详细讲解如何利用CSS伪元素`::after`来实现各种提示效果，包括内容插入、样式设置及在网页设计中的应用。通过实例演示，帮助读者掌握这一强大的CSS特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window.getComputedStyle</title>
    <style>
        div {
    
            width: 300px;
            height: 300px;
            background-color: lightcoral;
            border: solid 1px #999; /*BFC原理去掉margin重叠*/
        }
        div[data-desc]::after {
    
            content: attr(data-desc);
            display: block;
            width: 50px;
            height: 50px;
            background-color: blue;
            margin: 50% auto;
        }
    </style>
</head>
<body>
    <div data-desc=