如何在css中为下划线（下边框）添加阴影

Question

在我的情况下，我想增加文本和下划线之间的差距（这是听众）。所以我使用了border-bottom属性来做到这一点。但是在这里我想使用text-shadow，同样的阴影用于下划线（在我的例子中是底边框）。我怎么能这样做。

HTML

<h1 class="headerone">stackoverflow</h1>

CSS

h1.headerone{
    border-bottom:2px solid black;
    text-shadow:0 0 5px black;
    /* text-decoration:underline; I didn't use this because gap is low */
}

Answer 1

找到 fiddle demo

h1.headerone{
    text-shadow:0 0 5px black;
    /* text-decoration:underline; I didn't use this because gap is low */
    position:relative;
}
h1.headerone:before{
    content:'';
    position:absolute;
    bottom:-2px;
    left:0;
    width:100%;
    height:2px;
    background:#000;
    box-shadow:0 0 5px black;
}

Answer 2

试试这个css它可以帮到你。

h1.headerone{
border-bottom:2px solid black;
text-shadow:0 0 5px black;
-webkit-box-shadow: 0 8px 6px -6px black;
   -moz-box-shadow: 0 8px 6px -6px black;
        box-shadow: 0 8px 6px -6px black;
/* text-decoration:underline; I didn't use this because gap is low */
}

Fiddle Demo

Answer 3

在css中：

h1.headerone{
    border-bottom:2px solid black;
    text-shadow:0 0 5px black;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;
}

Answer 4

<h1 class="shadow">stackoverflow</h1>

CSS Fiddle Demo

h1.shadow {
    text-shadow:0 0 5px black;
    max-width: 200px;
}

h1.shadow::after {
    margin-top: 20px; /* distance goes here */
    display: block;
    content: ' ';
    height: 2px;
    background: black;
    box-shadow: 0 0 5px black;
}