伪元素::after、::before和CSS表达式attr()制作提示工具

attr( )###

CSS表达式 attr( ) 用来获取选择到的元素的某一HTML属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。

用法####

语法: attr( attribute-name <type-or-unit>? [, <fallback> ]? )
attribute-name
是CSS所引用的HTML属性名称。
<type-or-unit>
表示所引用的属性值的单位。如果该单位相对于所引用的属性值不合法，那么attr()表达式也不合法。若省略，则默认值为string
<fallback>
如果HTML元素缺少所规定的属性值或属性值不合法，则使用fallback值。该值必须合法，且不能包含另一个attr()表达式。

思路###

将提示信心作为目标元素的属性值，属性名可以使任一名字，推荐使用data-tooltip

<span class="tooltip" data-tooltip="The HTML <span> element is a generic inline container for phrasing content, which does not inherently represent anything.">span</span> 
<a class="tooltip" href="#" data-tooltip="Links is an open source text and graphic web browser with a pull-down menu system.">link</a> ```
2. CSS表达式attr( )获取提示信息作为伪元素的内容

content: attr(data-tooltip);```

设置伪元素的样式

.tooltip:hover::before {
    content: "";
    border: solid transparent;
    border-bottom-color: #4862A3;
    border-width: 10px;
    position: absolute;
    top: 20px;
}
.tooltip:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    min-width: 15em;
    font-weight: 100;
    line-height: 1.3em;
    margin: 0;
    background: #4862A3;
    color: #fff;
    padding: 15px;
    border-radius: 5px;
    right: 10%;
    top: 40px;
    z-index: 1;
    font-size: .7em;
}

最后编辑于：2017.12.04 07:07:20

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

伪元素::after、::before和CSS表达式attr()制作提示工具