CSS中右上角三個點(“…”)通常代表更多選項,類似于下拉菜單中的選項列表。這種效果相對簡單,可以使用偽元素(如“::after”)和一些CSS屬性輕松實現。
/* 創建一個擁有右上角三個點的容器 */ .container { position: relative; display: inline-block; } /* 添加類名“more”以顯示三個點 */ .container.more::after { content: "..."; position: absolute; top: -150%; /* 將三個點定位到容器的右上角 */ right: -50%; } /* 當鼠標懸停在容器上時顯現更多選項 */ .container:hover .more-menu { display: block; } /* 創建下拉菜單中的選項列表 */ .more-menu { display: none; position: absolute; right: 0; background-color: white; padding: 1rem; border: 1px solid black; } /* 樣式化下拉菜單中的選項 */ .more-menu a { display: block; color: black; text-decoration: none; padding: 0.5rem; } /* 鼠標懸停時高亮選項 */ .more-menu a:hover { background-color: lightgray; }
以上代碼中,“::after”偽元素被用于在容器的右上角添加三個點。當鼠標懸停在容器上時,通過更改“.more-menu”類的"display"屬性,下拉菜單中的選項列表可以顯現出來。從這里開始,根據您的需求可以更改下拉菜單的樣式。
在實際開發中,您可能需要將三個點更換為其他圖標或符號。可以更改::after中的“content”屬性來實現這一效果。
上一篇css 只設置頂部陰影
下一篇css 右側懸浮代碼