效果如下:

代码如下:
/** 使用data-tip来实现title的效果 */ // 通过属性选择器获取到标签,加上相对定位 [data-tip] { position:
relative; display: inline-block; } // 统一设置伪类的样式 [data-tip]::before, [data-tip]::
after{ position: absolute; visibility: visible; opacity: 0; z-index: 20200618;
pointer-events: none; transition: .2s; } // 单独设置before, 设置小三角形 [data-tip]::
before{ content: ''; // 通过border来设置三角形 border: 5px solid transparent; //
通过这个来设置三角形的直角的方向 border-top-color: rgba(0,0,0,.6); -webkit-transform: translateX
(-50%); transform: translateX(-50%); bottom: 100%; left: 50%; margin-bottom: -5
px; } // 设置字体和背景 [data-tip]::after { // 通过 attr来或者字体 content: attr(data-tip);
background: rgba(0,0,0,.7); font: 12px Microsoft YaHei; color: #fff; padding: 4
px8px; border-radius: 2px; box-shadow: 3px 3px 6px rgba(0, 0, 0, .3); bottom:
100%; width: 100%; white-space: pre-wrap; left: 50%; transform: translateX(-50%)
; margin-bottom: 5px; } // hover的时候显示 [data-tip]:hover::before, [data-tip]:hover
::after { visibility: visible; opacity: 1; -webkit-transition-delay: .15s;
transition-delay: .15s; } // 当data-tip 没有内容的时候隐藏 [data-tip=""]::before, [data-
tip=""]::after { display: none !important; }
使用方法: 使用data-tip=“xxxxxx”,也就是自定义属性来实现样式。 注意: 如果父级或者本身存在overflow:
hidden的情况下,该样式是不会生效的。原因如下: 因为overflower:hidden,会异常所有超出的部分。
而伪元素其实本身也是会当做元素来使用,所有伪元素在元素前面或者后面使用任何内容都会隐藏
如果要实现上图的效果,那就使用js的截取字符串的长度,并且拼接……来实现

技术
©2019-2020 Toolsou All rights reserved,
java四大函数式接口(重点,简单)html写樱花树,写樱花树的作文HashMap详解某东14薪变16薪,是诚意还是套路?浏览器内核(理解)让人意想不到的Python之樱花树(turtle库的华丽样式)os模块的简单使用