CSS虛線陰影

Question

比方說，我有一個跨度帶虛下劃線：

<span class="underline">Hello, I'm underlined text</span> 

.underline { 
    color: #444; 
    font-size: 250%; 
    display:inline-block; 
    border-bottom: 1px dashed #444; 
} 

我需要下劃線底部陰影。我認爲盒子陰影不是這種情況，唯一可能的解決方案是通過僞元素來實現。 我做這樣說：

.underline:after { 
    content:""; 
    border-bottom: 1px dashed #ff0000; 
    display: block; 
} 

這顯示虛線描邊以上下劃線的紅色，但我需要做的是，下劃線下方。 這怎麼可能？

在此先感謝。

Answer 1

使用position: relative;這樣的：

.underline:after { 
    content:""; 
    border-bottom: 1px dashed #ff0000; 
    display: block; 
    position: relative; 
    top: 2px; 
} 

Answer 2

我不知道爲什麼你不希望使用的box-shadow（除非其瀏覽器的問題），但它會解決這個問題。

box-shadow: 0px 10px #888888; 

.underline { 
    color: #444; 
    font-size: 250%;  
    box-shadow: 0px 10px 10px #888888; 
    display:inline-block; 
    border-bottom: 1px dashed #444; 
} 

希望這有助於