垂直分隔符CSS

Question

我正在创建一个垂直分隔线，它运行良好。但是CSS非常繁琐。

CSS代码如下：

.headerDivider1 {
border-left:1px solid #38546d;height:80px;position:absolute;right:250px;top:10px;
}

.headerDivider2 {
border-left:1px solid #16222c;height:80px;position:absolute;right:249px;top:10px;
}

HTML 如下：

<div class="headerDivider1"></div><div class="headerDivider2"></div>

结果是：

这是结果：

我该如何整理 HTML 和 CSS 代码？

- 422

Answer 1

.headerDivider {
     border-left:1px solid #38546d; 
     border-right:1px solid #16222c; 
     height:80px;
     position:absolute;
     right:249px;
     top:10px; 
}

<div class="headerDivider"></div>

- amosrivera

---

这是高度！ - Cristian Muscalu

Answer 2

<div class="headerdivider"></div>

并且

.headerdivider {
    border-left: 1px solid #38546d;
    background: #16222c;
    width: 1px;
    height: 80px;
    position: absolute;
    right: 250px;
    top: 10px;
}

- orlp

Answer 3

仅垂直分隔线

.divider {
  border-left: 1px solid #000;
  height: 100%;
}

- Niket Tongare

Answer 4

我更喜欢使用CSS中的after属性来创建垂直分隔线，因为它既不是内容也不是边框。

.block {
  position: relative; /* ADDED */
}

.block:after {
  content: '';
  position: absolute;
  border-left: 1px solid black;
  right: -10px; 
  height: 80%; 
}

.block:last-child:after {
  display: none; /* Hide the divider for the last block */
}

- Balram Singh