炫意html5
最早CSS3和HTML5移动技术网站之一

css中伪元素before或after中content的特殊用法attr

前言

前端技术发展很快,我之前写的js和jquery懒加载之可视区域加载,貌似谷歌,火狐等浏览器推出了新的方法,IntersectionObserver,可以高效的检测出某一个元素是否进入了可视区域!不过这个只有在谷歌51以上版本才可以使用!因此,关于这个属性,后面大面积推广之后,再给大家介绍。今天主要给讲讲用纯css制作精美的半边文字和鼠标移上去显示tip的效果!

知识点回顾

关于伪类及伪元素,我前面文章已经经过,before和after也写过相关文章http://www.xyhtml5.com/post/css_common 第十条。
content除了上面的用法之外,还可以如下写:

content: attr(data-炫H5);

获取哪个属性。

我们就是利用这个知识点。

纯css制作精美鼠标移上去显示tips效果

看如下案例:

html代码如下:

<div>
<span>炫H5测试</span>
</div>

css代码如下:

.炫H5{margin-top:30px}
span{
position: relative;
display: inline-block;
}
span:hover{
cursor: pointer;
}
span:hover:before{
content: attr(data-炫H5);
background-color: #2085c5;
border-radius:3px;
color: #fff;
padding: 10px;
position: absolute;
left: 100%;
top: -70%;
margin-left: 8px;
white-space: pre;
}
span:hover:after{
content: "";
position: absolute;
width: 0;
height: 0;
border-right: 8px solid #2085c5;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}

当然,用纯css写tips,还有其他办法!例如我右侧微信公众号的hover,可以把tips先隐藏起来,然后hover让其显示出来,也可以!这个只是介绍一种方法!

制作半边文字

效果如下:

html代码:

<span>前</span>
<span>端</span>
<span>博</span>
<span>客</span>

css代码:

.炫H5 {
position:relative;
display:inline-block;
font-size:80px; /*  任何宽度都可以 */
color: black; /* 任何颜色,或透明 */
overflow:hidden;
white-space: pre; /* 处理空格 */
}
.炫H5:before {
display:block;
z-index:1;
position:absolute;
top:0;
left:0;
width: 50%;
content: attr(data-content); /* 伪元素的动态获取内容 */
overflow:hidden;
color: #f00;
}

今天就暂时写到这里,假如你还有其他的实现方式,或者更简单的实现方式!欢迎留言交流!

炫意HTML5 » css中伪元素before或after中content的特殊用法attr

Java基础教程Android基础教程