在React和Tailwind CSS中，如何在hover時使用:after偽元素顯示下劃線？

本文介紹如何在React和Tailwind css中，利用:after偽元素在hover狀態下為元素添加下劃線效果。 之前的代碼示例存在一些問題，以下提供修正后的方案：

核心問題在于Tailwind CSS類名的應用方式和偽元素的正確使用。 直接在className屬性中書寫Tailwind類名，無需注釋。 對于偽元素樣式，需要使用hover:after:{style}的格式。

以下是一個經過修正的React代碼示例：

<div className="   menu-item   cursor-pointer   inline-block   mr-8   relative   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] ">   {/* 你的菜單項內容 */} </div>

代碼解釋：

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

• relative: 將父元素設置為相對定位，以便:after偽元素可以基于它進行絕對定位。
• hover:after:absolute: 在懸停狀態下，將:after偽元素設置為絕對定位。
• hover:after:content-[”]: 創建空內容的:after偽元素。
• hover:after:bottom-0, hover:after:left-0: 將:after偽元素定位在父元素的底部左側。
• hover:after:w-full: 設置:after偽元素的寬度為父元素的寬度。
• hover:after:h-[1px]: 設置:after偽元素的高度為1像素，形成細線效果。 (使用h-0.5可能會在某些瀏覽器中渲染不一致，建議使用h-[1px])
• hover:after:bg-[#3D3D3D]: 設置:after偽元素的背景顏色為深灰色。

通過以上修改，即可在React和Tailwind CSS中實現hover狀態下顯示下劃線的目標效果。 確保你的Tailwind CSS已正確配置和引入。

以上就是在React和T