在下面创建一个带有两条彩色线条的标题

时间：2015-08-31 21:19:48

标签： html css

Example

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <style>
    div.line_header {
      position: relative;
      width: 10px;
      display: inline-block;
    }
    div.line_header:before,
    div:after {
      content: '';
      position: absolute;
      height: 1px;
      background: black;
      top: 50%;
    }
    div.line_header:before {
      left: -20px;
      width: 20px;
      background: red;
    }
    div.line_header:after {
      right: -100px;
      width: 100px;
      
    }
    
    </style>
  </head>
  <body>
    <h4 style="color:red;margin-bottom:5px;">About Us</h4>
    <div class="line_header">&nbsp;</div>
  </body>
  </html>
＆＃13;
＆＃13;
＆＃13;

我想使用css / html重现上图中的内容。似乎无法将关于我们的产品排成一行。运行代码段以查看我目前所做的工作。

1 个答案:

答案 0 :(得分：1)

您只需在position: absolute元素上使用::before，因为::after已经垂直对齐而没有任何位置更改。

＆＃13;
＆＃13; 
.about-us {
  background: #545454;
  padding: 10px;
  position: relative;
  font-weight: bold;
  color: #F7E01D;
  font-family: tahoma;
}
.about-us::after {
  content: " ";
  display: block;
  background: #F7E01D;
  width: 25px;
  height: 4px;
  margin-top: 5px;
}
.about-us::before {
  content: " ";
  display: block;
  background: white;
  width: 10em;
  height: 1px;
  position: absolute;
  top: 2em;
  left: 2.5em;
  margin-top: 5px;
}
＆＃13; 
<div class="about-us">About Us</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题