css 使用content:attr()动态生成

_处女座程序员的日常

已于 2024-09-05 22:18:53 修改

阅读量641

点赞数 1

分类专栏： css 前端文章标签： css 前端

于 2024-09-05 22:18:00 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42931285/article/details/141942079

版权

前端同时被 2 个专栏收录

378 篇文章

订阅专栏

css

114 篇文章

订阅专栏

before , :after 向指定元素插入内容，使用content属性指定插入的内容。
content一般和伪元素 :before和 :after搭配使用,一起生成内容。
attr()函数：可以获取该元素的属性，一般和data- * 自定义属性配合使用。

// data-cotent绑定的值可以是动态写的值，在小程序中同样适用
<div data-content="我是一个悬浮提示框" class="content">鼠标滑过我</div>

在这里插入图片描述

.content{
			text-align: center;
			height: 50px;
			line-height: 50px;
			width: 100px;
			margin: 100px auto;
			padding: 5px;
			background-color: rgb(196,0,0);
			color: white;
			font-size: 18px;
			position: relative;
     }
.content:hover:before{
			content: attr(data-content); /*动态获取数据*/
			position: absolute;
			left: 100%;
			width:200px;
			height: 50px;
			font-size: 18px;
			line-height: 50px;
			background-color: rgb(0,196,0);
			margin-left: 12px;
     }