曜輝工作室的網站設計費用大概多少？

許多設計稿會要求在導覽列的中文選單下方，並排顯示一排較小的英文副標，用來提升網站整體的設計感。若不想透過外掛修改 WordPress 原始的選單結構，最常見且快速的做法是利用 CSS 偽元素（::after）來注入內容。然而，實作時常會遇到偽元素被父元素裁切、Hover 時背景色蓋住副標，或是副標位置導致連結感應區域偏移等細節問題，若處理不當，反而會影響導覽列的可用性。

內容導覽

偽元素的實作原理與結構調整

CSS 偽元素 ::after 的預設行為是緊跟在內容之後。若要實現「上下排」的效果，核心在於改變選單連結（a 標籤）的顯示屬性。透過將連結設為 inline-block 或 flex 佈局，並搭配 position: relative，我們可以精準控制副標出現在文字下方，而不會撐開原本的導覽列高度或破壞對齊。此外，為了確保偽元素不會干擾使用者的滑鼠點擊行為，必須妥善設定 pointer-events。

範例程式碼

/* 1. 初始化連結容器，確保副標不會被裁切並設定排列模式 */
.elementor-nav-menu > li.menu-item > a {
    position: relative;
    overflow: visible; 
    display: inline-block; 
    text-align: center;
}

/* 2. 定義偽元素樣式，處理位置與顯示穩定性 */
.elementor-nav-menu > li.menu-item > a:after {
    content: '';
    display: block;
    position: relative;
    top: 0;
    font-size: 8px;
    color: #999;
    margin-top: 2px;
    text-align: center;
    line-height: 1.0;
    background: none !important; /* 強制移除頁面編輯器可能產生的背景色 */
    transition: none !important; /* 避免 Hover 時產生非預期的動畫位移 */
    opacity: 1 !important;        /* 確保副標永遠顯示，不被透明度效果影響 */
    pointer-events: none;        /* 關鍵：防止偽元素阻礙滑鼠點擊連結 */
}

/* 3. 根據選單順序注入對應的英文內容 */
.elementor-nav-menu > li:nth-child(1) > a:after { content: 'About Us'; }
.elementor-nav-menu > li:nth-child(2) > a:after { content: 'Our Team'; }
.elementor-nav-menu > li:nth-child(3) > a:after { content: 'Services'; }
.elementor-nav-menu > li:nth-child(4) > a:after { content: 'Testimonials'; }
.elementor-nav-menu > li:nth-child(5) > a:after { content: 'News'; }
.elementor-nav-menu > li:nth-child(6) > a:after { content: 'Contact'; }

實作步驟詳解

第一步：配置連結容器屬性

首先必須針對選單的 <a> 標籤設定 overflow: visible。在 Elementor 或某些 WordPress 主題中，導覽列為了處理 Hover 動畫，常會預設開啟隱藏溢出，這會導致位於連結下方的偽元素直接消失。同時設定 display: inline-block 是為了讓 a:after 能夠順利換行顯示。

第二步：設定偽元素的基本視覺

偽元素的 font-size 通常建議設在 8px 到 10px 之間，並搭配較淡的顏色（如 #999），以確保主副標視覺層次分明。這裡使用 position: relative 而非 absolute，是因為 relative 能自動撐開連結的高度，讓使用者點擊主標文字下方的小字時，依然能觸發連結跳轉。

第三步：內容注入與特定選擇

利用 CSS 的 :nth-child() 選擇器，可以依照選單在後台排列的順序，分別給予不同的內容。這種做法的好處是不需要動到 PHP 範本，純粹靠 CSS 就能完成中英文對照的視覺效果。

踩坑提醒與實務建議

Hover 狀態衝突：許多主題會對選單連結套用 Hover 背景色，這可能會蓋掉偽元素。程式碼中加上 background: none !important 是為了確保小字下方不會突然出現一大塊背景。
滑鼠穿透（Pointer Events）：偽元素雖然是裝飾，但如果位置剛好擋在連結上方，有時會造成 Hover 狀態閃爍。設定 pointer-events: none 可以強迫滑鼠事件直接作用於下方的連結，解決反應遲鈍的問題。
RWD 調整：手機版漢堡選單通常不適合這種排版。建議將此段 CSS 包在 @media (min-width: 1025px) 媒體查詢中，只針對桌機版顯示。
內容管理：若客戶未來會在後台自行調整選單順序，:nth-child 的內容就會錯亂。實務上如果選單變動頻繁，建議改用連結的 class 名稱來指定內容。