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

前言

今天主要讲讲用纯css制作精美的半边文字和鼠标移上去显示tip的效果！

知识点回顾

关于伪类及伪元素，我前面文章已经经过。content除了上面的用法之外，还可以如下写：

content: attr(data-haorooms);

获取哪个属性。我们就是利用这个知识点。

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

看如下案例：

html代码如下：

<div class="haorooms">        <span data-haorooms="haorooms鼠标效果tips-纯css">haorooms测试</span></div>

css代码如下：

.haorooms{margin-top:30px}    span{            position: relative;            display: inline-block;        }        span:hover{            cursor: pointer;        }        span:hover:before{            content: attr(data-haorooms);            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 class="haorooms" data-content="前">前</span><span class="haorooms" data-content="端">端</span><span class="haorooms" data-content="博">博</span><span class="haorooms" data-content="客">客</span>

css代码：

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

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