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; 
} 

мне нужна нижняя тень для подчеркивания. Я предполагаю, что box-shadow - это не тот случай, и единственным возможным решением является его использование с помощью псевдоэлементов. Я делаю это так:

.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: 0px 10px #888888; 

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

надеюсь, что это помогает