如何从这个按钮的中间画一条垂直线？

Question

我有一个按钮，我希望它在悬停在它上面时有一条线，这条线应该从按钮的中间开始。

最后应该是这样的：

the image

.hotspot__btn {
  background-color: #ee2737;
  border-radius: 50px;
  border: 0.75px solid #ffffff;
  box-shadow: 0px 0px 0px 5px #ee27384f;
  outline-style: none;
  padding: 5px;
  z-index: 3;
}

.hotspot__btn:hover {
  box-shadow: 0px 0px 0px 12px #ee27384f;
  transition: box-shadow 0.5s linear;
}

<div class="hotspot">
    <button class="hotspot__btn"></button>
</div>

Answer 1

使用伪元素作为线条。使用绝对定位线实现定位，因此按钮需要position: relative。

.hotspot__btn {
  background-color: #ee2737;
  border-radius: 50px;
  border: 0.75px solid #ffffff;
  box-shadow: 0px 0px 0px 5px #ee27384f;
  outline-style: none;
  padding: 5px;
  z-index: 3;
  
  /* so we can position the line */
  position: relative;
}

.hotspot__btn:hover {
  box-shadow: 0px 0px 0px 12px #ee27384f;
  transition: box-shadow 0.5s linear;
}


.hotspot__btn:hover:before {
  content: '';
  width: 2px;
  height: 300px;
  background: purple;
  
  /* positioning of line relative to the button */
  position: absolute;
  top: 5px; /* amount of padding top of your button */
  left: 0;
  right: 0;
  margin: auto;
}

<div class="hotspot">
    <button class="hotspot__btn"></button>
</div>

Answer 2

你应该使用伪after元素：

  .hotspot { 
      margin: 25px;
    }
    
    .hotspot__btn {
      position: relative;
      background-color: #ee2737;
      border-radius: 50px;
      border: 0.75px solid #ffffff;
      box-shadow: 0px 0px 0px 5px #ee27384f;
      outline-style: none;
      padding: 5px;
      z-index: 3;
    }

    .hotspot__btn:hover {
      box-shadow: 0px 0px 0px 12px #ee27384f;
      transition: box-shadow 0.5s linear;
      transition: all .2s ease-in-out


    }
    .hotspot__btn::after{ 
      content: '';
      width: 2px;
      height: 0;
      position: absolute;
      left: 50%;
      top: 50%;
      background-color: greenyellow;
      transform: translateX(-50%);
      transition: all .2s ease-in-out
    }
    .hotspot__btn:hover::after{ 
  height: 100px;
}

  <div class="hotspot">
      <button class="hotspot__btn"></button>
    </div>

Answer 3

您可以使用:before 或:after 伪元素来充当直线：

.hotspot__btn {
  position: relative; /** allows the :after to be positioned according to the button **/
  background-color: #ee2737;
  border-radius: 50px;
  border: 0.75px solid #ffffff;
  box-shadow: 0px 0px 0px 5px #ee27384f;
  outline-style: none;
  padding: 5px;
  z-index: 3;
}

.hotspot__btn:after {
  content: "";
  position: absolute; /** allows a better control ove the line positionning **/
  width: 2px;
  height: 0;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, 0, 0); /** centering the line horizontally **/
  background-color: #00f;
  transition: height .4s 0s ease;
}

.hotspot__btn:hover {
  box-shadow: 0px 0px 0px 12px #ee27384f;
  transition: box-shadow 0.5s linear;
}

.hotspot__btn:hover:after {
  height: 50%; /** from the middle to the bottom which is 50% of the button's height **/
}

<div class="hotspot">
  <button class="hotspot__btn"></button>
</div>

如果你想让那条线延伸为button的阴影，你可以使用calc函数将阴影的spread-radius（即12px）添加到button的50% height.

.hotspot__btn {
  position: relative;
  background-color: #ee2737;
  border-radius: 50px;
  border: 0.75px solid #ffffff;
  box-shadow: 0px 0px 0px 5px #ee27384f;
  outline-style: none;
  padding: 5px;
  z-index: 3;
}

.hotspot__btn:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 0;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  background-color: #00f;
  transition: height .4s 0s ease;
}

.hotspot__btn:hover {
  box-shadow: 0px 0px 0px 12px #ee27384f;
  transition: box-shadow 0.5s linear;
}

.hotspot__btn:hover:after {
  height: calc(50% + 12px); /** adding 12px from the blur-radius of the box-shadow **/
}

<div class="hotspot">
  <button class="hotspot__btn"></button>
</div>

Answer 4

您可以考虑使用伪元素::after，然后根据您的需要对其进行样式设置（我不确定您希望这条线看起来像什么）

见MDN docs。