箱阴影到左

Question

我用下面的代码

.header .menu-item { 
 
    margin: 0 15px; 
 
    list-style: none; 
 
    font: 500 16px Poppins, sans-serif; 
 
    text-transform: lowercase; 
 
    display: inline; 
 
} 
 
.header .menu-item a, 
 
.header .menu-item a:visited { 
 
    display: inline-block; 
 
    width: auto; 
 
    padding: 0 10px; 
 
    line-height: 110%; 
 
    color: #000; 
 
    text-decoration: none; 
 
    -webkit-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,1); 
 
    -moz-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,1); 
 
    box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,1); 
 
    -webkit-transition: box-shadow ease-in-out 0.2s; 
 
    -moz-transition: box-shadow ease-in-out 0.2s; 
 
    transition: box-shadow ease-in-out 0.2s; 
 
} 
 
.header .menu-item a:hover, 
 
.header .menu-item a:focus{ 
 
    color: #000; 
 
    text-decoration: none; 
 
    -webkit-box-shadow: inset 0px -7px 0px 0px rgba(0,0,0,1); 
 
    -moz-box-shadow: inset 0px -7px 0px 0px rgba(0,0,0,1); 
 
    box-shadow: inset 0px -7px 0px 0px rgba(0,0,0,1); 
 
}

<div class="header"> 
 
    <ul class="menu"> 
 
    <li class="menu-item"><a href="#">Home</a></li> 
 
    <li class="menu-item"><a href="#">Contato</a></li> 
 
    </ul> 
 
</div>

到目前为止，这正是我多么希望。除了因为我想从右到左出现悬停效果。我怎么能用箱子阴影来做到这一点？

按照布局有一个想法。

我打破我的头，但没有得到任何东西

如果你有这另一种解决方案，只要他们不使用的图像，我会感激不尽。

非常感谢

Answer 1

可选。如果你有没有找到一个解决方案使用盒子阴影

我刚才使用了一个伪元素，并将一些效果放入元素。

.header .menu-item { 
 
    margin: 0 15px; 
 
    list-style: none; 
 
    font: 500 16px Poppins, sans-serif; 
 
    text-transform: lowercase; 
 
    display: inline; 
 
} 
 
.header .menu-item a, 
 
.header .menu-item a:visited { 
 
    display: inline-block; 
 
    width: auto; 
 
    padding: 0 10px; 
 
    line-height: 110%; 
 
    color: #000; 
 
    text-decoration: none; 
 
    position: relative; 
 
} 
 

 
.header .menu-item a:before { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    height: 7px; 
 
    width: 0px; 
 
    background: black; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 

 
.header .menu-item a:hover:before { 
 
    width: 100%; 
 
}

<div class="header"> 
 
    <ul class="menu"> 
 
    <li class="menu-item"><a href="#">Home</a></li> 
 
    <li class="menu-item"><a href="#">Contato</a></li> 
 
    </ul> 
 
</div>

希望它可以帮助你。欢呼:)

Answer 2

使用可以实现这个使用:before和:after选择器，无需使用盒子阴影。

.header .menu{ 
 
    background:blue; 
 
    padding: 10px 0; 
 
} 
 
.header .menu-item { 
 
    margin: 0 15px; 
 
    list-style: none; 
 
    font: 500 16px Poppins, sans-serif; 
 
    text-transform: capitalize; 
 
    display: inline; 
 
} 
 
.header .menu-item a, 
 
.header .menu-item a:visited { 
 
    display: inline-block; 
 
    width: auto; 
 
    padding: 10px; 
 
    line-height: 110%; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    position: relative; 
 
} 
 

 
.header .menu-item a:before { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    height: 7px; 
 
    width: 0px; 
 
    background: #fff; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 

 
.header .menu-item a:hover:before { 
 
    width: 100%; 
 
}

<div class="header"> 
 
    <ul class="menu"> 
 
    <li class="menu-item"><a href="#">Home</a></li> 
 
    <li class="menu-item"><a href="#">Contato</a></li> 
 
    </ul> 
 
</div>

Answer 3

UNDERLINE从右至左：

.header .menu{ 
 
    background:blue; 
 
    padding: 10px 0; 
 
} 
 
.header .menu-item { 
 
    margin: 0 15px; 
 
    list-style: none; 
 
    font: 500 16px Poppins, sans-serif; 
 
    text-transform: capitalize; 
 
    display: inline; 
 
} 
 
.header .menu-item a, 
 
.header .menu-item a:visited { 
 
    display: inline-block; 
 
    width: auto; 
 
    padding: 10px; 
 
    line-height: 110%; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    position: relative; 
 
} 
 

 
.header .menu-item a:before { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    height: 7px; 
 
    width: 0px; 
 
    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out; 
 
} 
 

 
.header .menu-item a:hover:before { 
 
    width: 100%; 
 
    background: #fff; 
 
}

<div class="header"> 
 
    <ul class="menu"> 
 
    <li class="menu-item"><a href="#">Home</a></li> 
 
    <li class="menu-item"><a href="#">Contato</a></li> 
 
    </ul> 
 
</div>

几个传输：

UNDERLINE从上到下：

.header .menu{ 
 
    background:blue; 
 
    padding: 10px 0; 
 
} 
 
.header .menu-item { 
 
    margin: 0 15px; 
 
    list-style: none; 
 
    font: 500 16px Poppins, sans-serif; 
 
    text-transform: capitalize; 
 
    display: inline; 
 
} 
 
.header .menu-item a, 
 
.header .menu-item a:visited { 
 
    display: inline-block; 
 
    width: auto; 
 
    padding: 10px; 
 
    line-height: 110%; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    position: relative; 
 
} 
 

 
.header .menu-item a:before { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    height: 0; 
 
    width: 100%; 
 
    background: transparent; 
 
    transition: height .5s ease, background-color .5s ease; 
 
} 
 

 
.header .menu-item a:hover:before { 
 
    height: 7px; 
 
    background: #fff; 
 
}

<div class="header"> 
 
    <ul class="menu"> 
 
    <li class="menu-item"><a href="#">Home</a></li> 
 
    <li class="menu-item"><a href="#">Contato</a></li> 
 
    </ul> 
 
</div>

UNDERLINE左至右：

.header .menu{ 
 
    background:blue; 
 
    padding: 10px 0; 
 
} 
 
.header .menu-item { 
 
    margin: 0 15px; 
 
    list-style: none; 
 
    font: 500 16px Poppins, sans-serif; 
 
    text-transform: capitalize; 
 
    display: inline; 
 
} 
 
.header .menu-item a, 
 
.header .menu-item a:visited { 
 
    display: inline-block; 
 
    width: auto; 
 
    padding: 10px; 
 
    line-height: 110%; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    position: relative; 
 
} 
 

 
.header .menu-item a:before { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 7px; 
 
    bottom: 0; 
 
    width: 0px; 
 
    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out; 
 
} 
 

 
.header .menu-item a:hover:before { 
 
    width: 100%; 
 
    background: #fff; 
 
}

<div class="header"> 
 
    <ul class="menu"> 
 
    <li class="menu-item"><a href="#">Home</a></li> 
 
    <li class="menu-item"><a href="#">Contato</a></li> 
 
    </ul> 
 
</div>

UNDERLINE MIDDLE OUT：

.header .menu{ 
 
    background:blue; 
 
    padding: 10px 0; 
 
} 
 
.header .menu-item { 
 
    margin: 0 15px; 
 
    list-style: none; 
 
    font: 500 16px Poppins, sans-serif; 
 
    text-transform: capitalize; 
 
    display: inline; 
 
} 
 
.header .menu-item a, 
 
.header .menu-item a:visited { 
 
    display: inline-block; 
 
    width: auto; 
 
    padding: 10px; 
 
    line-height: 110%; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    position: relative; 
 
} 
 

 
.header .menu-item a:after { 
 
    content: ''; 
 
    display: block; 
 
    margin: auto; 
 
    height: 7px; 
 
    width: 0px; 
 
    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out; 
 
} 
 

 
.header .menu-item a:hover:after { 
 
    width: 100%; 
 
    background: #fff; 
 
}

<div class="header"> 
 
    <ul class="menu"> 
 
    <li class="menu-item"><a href="#">Home</a></li> 
 
    <li class="menu-item"><a href="#">Contato</a></li> 
 
    </ul> 
 
</div>

源出于此答案

http://bradsknutson.com/blog/css-sliding-underline/