html代码如下：

     
 
      haorooms测试 
     

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，

制作半边文字

效果如下：

html代码：

前 端 博 客

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; }