如何使用CSS在同一行中创建两条垂直线

Question

我想使用CSS在同一行中创建两条垂直线。

我想像这样创建：

我已经添加了一条垂直粗线（参见下面的脚本）

.desg {
border-bottom: 2px solid LightSlateGrey;
border-left: 15px solid LightSlateGrey ; 
background-color: white;
font-size: 20px;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight: bold;
color: #778899; }

Answer 1

我建议使用:before伪选择器。您需要将元素本身设为窄线，因为decimal(38,2)将显示在:before的右侧。然后将border-left设为粗线。

你甚至可以在两边添加一点:before：

margin

.desg {
  border-bottom: 2px solid LightSlateGrey;
  border-left: 3px solid LightSlateGrey;
  background-color: white;
  font-size: 20px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  color: #778899;
}

.desg:before {
  border-left: 15px solid LightSlateGrey;
  margin-left: 3px;
  margin-right: 5px;
  content: '';
}

请注意，为了显示<div class="desg">Text</div>中的边框，您需要为:before提供 :before 属性，该属性可以保留为空

希望这有帮助！ ：）

Answer 2

我不会使用类似于此的边框，而是使用<hr>或div标记。 在使用<hr>时，您需要设置边框宽度，在使用div时，您可以使用width或border。将很快提供代码，或者您可以不使用:before伪类