箱陰影到左

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/