下面的CSS样式有什么问题[重复]答案

【问题标题】：What is wrong with the CSS style below [duplicate]下面的CSS样式有什么问题[重复]
【发布时间】：2020-04-19 05:39:22
【问题描述】：

[data-title] {
    position: relative;
    cursor: help;
}
[data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
    top: -30px;
    left: 0;
    display: inline-block;
    padding: 3px 6px;
    border-radius: 2px;
    background-color: cadetblue;
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    white-space: nowrap;
}
[data-title]:hover::after {
    content: '';
    position: absolute;
    top: -7px;
    left: 8px;
    display: inline-block;
    border: 8px solid transparent;
    border-top: 8px solid cadetblue;
}

它适用于大多数元素示例：

<p data-title="This is the tooltips">Test Tooltips</p>

但它不适用于元素：

<input type="text" data-title="Test input tooltips" />

【问题讨论】：

输入剂量不支持：之前
:before 和 :after 在容器内渲染，不能包含其他元素。
已经在这里回答stackoverflow.com/questions/19480010/…

标签： css

【解决方案1】：

这样试试

[data-title] {
    position: relative;
    cursor: help;
    margin-top:50px;
}
[data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
    top: -30px;
    left: 0;
    display: inline-block;
    padding: 3px 6px;
    border-radius: 2px;
    background-color: cadetblue;
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    white-space: nowrap;
}
[data-title]:hover::after {
    content: '';
    position: absolute;
    top: -7px;
    left: 8px;
    display: inline-block;
    border: 8px solid transparent;
    border-top: 8px solid cadetblue;
}

<div data-title="Test input tooltips">
    <input type="text" />
</div>

【讨论】：