使用 CSS 在工具提示中添加箭头

百变鹏仔 3个月前 (09-20) #CSS

文章标签箭头

通过 CSS，您可以使用 :after 在工具提示中添加小箭头。这样，也可以使用 content 属性。

您可以尝试运行以下代码以在工具提示中添加箭头：

示例

现场演示

<!DOCTYPE html><html>   <style>      .mytooltip .mytext {         visibility: hidden;         width: 140px;         background-color: blue;         color: #fff;         z-index: 1;         bottom: 100%;         left: 60%;         margin-left: -90px;         text-align: center;         border-radius: 6px;         padding: 5px 0;         position: absolute;      }      .mytooltip {         position: relative;         display: inline-block;         margin-top: 50px;      }      .mytooltip .mytext:after {         content: "";         position: absolute;         top: 100%;         left: 50%;         margin-left: -10px;         border-width: 7px;         border-style: solid;         border-color: blue transparent transparent transparent;      }      .mytooltip:hover .mytext {         visibility: visible;      }   </style>   <body>      <div class = "mytooltip">Keep mouse cursor over me         <span class = "mytext"> My Tooltip text</span>      </div>   </body></html>

文章推荐

使用 CSS 在工具提示中添加箭头

示例

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写