在React和Tailwind CSS中，如何在鼠標懸停時生成下劃線效果？

在React和Tailwind css中優雅實現鼠標懸停下劃線效果

本文演示如何在React項目中，利用Tailwind CSS高效創建鼠標懸停時出現下劃線的文本效果。 之前的嘗試可能因為Tailwind CSS類名的使用方式或選擇器順序問題導致失效。以下方法能確保效果正確呈現。

我們先來看一個改進后的代碼示例：

<div className="relative inline-block mr-8 cursor-pointer hover:after:absolute hover:after:content-[''] hover:after:bottom-0 hover:after:left-0 hover:after:w-full hover:after:h-[1px] hover:after:bg-[#3D3D3D]">   <p>菜單項文本</p> </div>

代碼詳解:

立即學習“前端免費學習筆記（深入）”；

• relative: 這是關鍵！此類使::after偽元素能夠相對于其父元素(div)進行定位。
• inline-block: 確保元素占據一行空間，方便下劃線水平延伸。 (如果你的p元素本身已經占據一行，可以移除這個類)
• mr-8: Tailwind CSS的margin right，調整元素間距。
• cursor-pointer: 將鼠標指針更改為手型指針。
• hover:after:absolute: 只有在懸停時，::after偽元素才設置為絕對定位。
• hover:after:content-[”]: 生成一個空的偽元素。
• hover:after:bottom-0: 將偽元素放置在父元素底部。
• hover:after:left-0: 將偽元素放置在父元素左邊。
• hover:after:w-full: 偽元素寬度設置為父元素的100%。
• hover:after:h-[1px]: 偽元素高度設置為1像素，形成細線。
• hover:after:bg-[#3D3D3D]: 設置偽元素背景顏色為深灰色。

改進說明:

此代碼比之前的版本更簡潔、更易讀，并避免了不必要的類名和注釋。 hover修飾符正確地應用于::after偽元素，確保下劃線只在鼠標懸停時出現。 高度也改為更標準的h-[1px]。 通過使用方括號[]，我們可以直接在Tailwind CSS類名中使用變量或表達式，使代碼更靈活。

通過以上步驟，你就能在你的React和Tailwind CSS項目中輕松實現鼠標懸停下劃線效果了。 記得檢查你的Tailwind CSS配置是否正確，并且已正確引入。

以上就是在React和T