css怎么制作提示 |html css 模板下载

1. 利用伪元素:before和:after来生成提示框。

.tooltip {
position: relative;
}
.tooltip:before {
content: attr(title);
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
padding: 5px;
color: #fff;
background-color: #000;
border-radius: 3px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.tooltip:hover:before {
opacity: 1;
visibility: visible;
}

2. 利用::placeholder伪元素来制作输入框的提示。

input[type="text"]::placeholder {
color: #999;
font-style: italic;
}

3. 利用 alt 属性来制作图片的提示。

css map less，css 手机按钮样式，css3 ui 制作，css页面布局左边固定，css3动画移动属性，用css写玫瑰花，html css 模板下载

4. 利用title属性来制作链接的提示。

示例页面

5. 利用CSS3新增的tooltip属性来制作提示。（只适用于Chrome和Firefox）

.tooltip {
background-color: #f1c40f;
color: #000;
text-align: center;
border-radius: 5px;
padding: 5px;
display: inline-block;
cursor: help;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
color: #fff;
background-color: #000;
border-radius: 3px;
opacity: 0;
visibility: hidden;
padding: 5px;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.tooltip:hover::after {
opacity: 1;
visibility: visible;
}

以上就是常见的制作提示的方法，不同的应用场景可以选用不同的方式来制作。希望对大家有所帮助。