如何显示带有阴影的悬停下划线，但从右侧和左侧保持一些不透明度

Question

我想在带有阴影效果的菜单列表上创建悬停效果。我想要这样。 http://prntscr.com/pczetu（见主场效应。）

我只是想展示一下这个设计 http://prntscr.com/pczetu 这是我的代码它工作正常。但是想要左右两侧的不透明度。

body {
  /* pretty it up */
  width: 95vw;
  height: 95vh;
  background-color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  font: 1em Arial, sans-serif;
  display: inline-block;
  padding: 1em;
  margin: 1em;
  /*   border-radius: 5px; */
  text-decoration: none;
  color: gray;
  /* Set up the hover */
  /* If you aren't using autoprefix, remember to prefix the gradient for other browsers */
  background-image: linear-gradient(dodgerblue, dodgerblue), linear-gradient(silver, silver);
  background-size: 0 5px, auto;
  background-repeat: no-repeat;
  background-position: center bottom;
  transition: all .2s ease-out;
}

.button:hover {
  /* The following line makes the underline only as wide as the text */
  /* background-size: calc(100% - 2em) 5px, auto; */
  background-size: 100% 5px, auto;
}

<a href="#" class="button">Checkout</a>
<a href="#" class="button">Buy now</a>
<a href="#" class="button">A really long button for absolutely no reason</a>

悬停在菜单上我要这个 http://prntscr.com/pczetu 提前谢谢你。

Answer 1

您可以在渐变本身中加入效果：

更新您的代码以进行测试和调整：background: linear-gradient(90deg, transparent,dodgerblue,dodgerblue, dodgerblue, transparent) silver/* second gradient turned into bg-color*/;

下方演示

body {
  /* pretty it up */
  width: 95vw;
  height: 95vh;
  background-color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  font: 1em Arial, sans-serif;
  display: inline-block;
  padding: 1em;
  margin: 1em;
  /*   border-radius: 5px; */
  text-decoration: none;
  color: gray;
  /* Set up the hover */
  /* If you aren't using autoprefix, remember to prefix the gradient for other browsers */
  background: linear-gradient(90deg, transparent,dodgerblue,dodgerblue, dodgerblue, transparent) silver;
  background-size: 0 5px, auto;
  background-repeat: no-repeat;
  background-position: center bottom;
  transition: all .2s ease-out;
}

.button:hover {
  /* The following line makes the underline only as wide as the text */
  /* background-size: calc(100% - 2em) 5px, auto; */
  background-size: 100% 5px, auto;
}

<a href="#" class="button">Checkout</a>
<a href="#" class="button">Buy now</a>
<a href="#" class="button">A really long button for absolutely no reason</a>

如何显示带有阴影的悬停下划线，但从右侧和左侧保持一些不透明度

How to show hover underline with shadow but keep some opacity from right and left side

css

hover

mousehover