垂直分隔线CSS

422*_*422 24 html css

我正在创建一个垂直分隔线,工作正常.但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;
}
Run Code Online (Sandbox Code Playgroud)

HTML是:

<div class="headerDivider1"></div><div class="headerDivider2"></div>
Run Code Online (Sandbox Code Playgroud)

结果是:

替代文字

我怎么能整理HTML和CSS?

amo*_*era 64

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

<div class="headerDivider"></div>
Run Code Online (Sandbox Code Playgroud)


orl*_*rlp 6

<div class="headerdivider"></div>
Run Code Online (Sandbox Code Playgroud)

.headerdivider {
    border-left: 1px solid #38546d;
    background: #16222c;
    width: 1px;
    height: 80px;
    position: absolute;
    right: 250px;
    top: 10px;
}
Run Code Online (Sandbox Code Playgroud)