如何从此按钮的中间绘制垂直线？

要在按钮的中间绘制一条垂直线，你可以使用CSS来实现。以下是一个简单的示例，展示了如何在一个按钮中绘制垂直线：

HTML

<button class="button-with-line">按钮</button>

CSS

.button-with-line {
  position: relative;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  background-color: #f0f0f0;
  cursor: pointer;
}

.button-with-line::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 80%;
  background-color: #000;
}

解释

1. HTML部分：创建一个按钮，并为其添加一个类名button-with-line。
2. CSS部分：
   • .button-with-line：设置按钮的基本样式，如内边距、字体大小、边框、背景颜色和鼠标悬停时的样式。
   • .button-with-line::after：使用伪元素::after在按钮中间绘制一条垂直线。content: ''确保伪元素是可见的。position: absolute和top: 50%、left: 50%将伪元素定位到按钮的中心。transform: translate(-50%, -50%)确保伪元素在按钮中心对齐。width: 2px和height: 80%设置垂直线的宽度和高度。

应用场景

这种技术可以用于创建具有视觉分隔效果的按钮，例如在工具栏按钮或导航菜单按钮中。

参考链接

• CSS Pseudo-elements
• CSS Transform

希望这个示例能帮助你理解如何在按钮中间绘制垂直线。如果你有任何其他问题，请随时提问！