纯css提示

最新推荐文章于 2024-07-29 22:08:03 发布

luoqiang0831

最新推荐文章于 2024-07-29 22:08:03 发布

阅读量305

点赞数

文章标签： css css attr

本文链接：https://blog.csdn.net/luoqiang0831/article/details/50715348

版权

前段时间因为项目框架需要要写一个鼠标移到元素上面进行提示的小控件,支持左右上下当时第一想法是用定位+js,可是用上了js感觉可用性就不太好,就想着能不能只用css,可是到最后上下左右定位问题只需加上class名可进行实现为了不写多余的标签使用了伪元素,可是问题来了伪元素里面的content的值(一直以为在css是不可变的)是个问题,因为其他项目的耽搁所以这事就耽误下来了,后来闲暇时又去网上看了下才发现已经有人做出类似的效果而且伪元素里面的值也可以进行变动,本以为用是js 但是人家居然用的是css全部搞定了.

所以看了下人家的源码才发现这段有趣的代码

[data-hint]:after{content:attr(data-hint);}

<pre name="code" class="html"><!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div:after{content:"[line " attr(title) "]";}
</style>
</head>
<body>
<div title=123></div>
</body>
</html>

顿时一阵的无语,看来也是自己学艺不精呀！引以为戒

而需要注意的是：