Question

＆＃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;

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

Answer 1

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

＆＃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;

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

1 个答案: