如何设置我的<hr />的一半与另一半不同？

Question

我试图将<hr>的一半设置为与另一半不同，如下所示：

正如您所看到的，<hr>的左半部分是红色，比右侧的薄灰色侧厚一点。使用CSS可以实现这一点吗？谢谢！

Answer 1

对于<hr>行，您可以使用css :before伪元素制作不同颜色的区域（请更改颜色和尺寸以符合您的设计）：

hr {
    background-color: #555;
    border: none;
    display: block;
    height: 4px;
    overflow: visible;
    position: relative;
    width: 100%;
}

hr:before {
    background-color: #f90;
    content: '';
    display: block;
    height: 8px;
    left: 0;
    position: absolute;
    top: -2px;
    width: 20%;
    z-index: 1;
}

<hr>

Answer 2

您可以对:before的一半使用hr伪元素，并使用absolute位置。

hr {
  position: relative;
  border: none;
  border-bottom: 1px solid #aaa;
  overflow: visible;
}
hr:before {
  position: absolute;
  left: 0;
  width: 50%;
  content: '';
  height: 3px;
  background: red;
  top: -1px;
}

<hr>

Answer 3

使用flex我会非常简单并在伪上使用box-shadow来使这个答案与其他答案不同;）

＆＃13;

＆＃13;

hr {display:flex;}
hr:before {
  content:'';
  width:50%;
  box-shadow:0 0 0 3px rgb(146, 24, 53);
}

body {background:#333;color:rgba(124,153,246)}
code{font-size:1.5em;color:gold}

＆＃13;

<h1><code>FLEX</code> TEST ON <code>HR</code> PSEUDO</h1>
<hr>

＆＃13;

＆＃13;

＆＃13;

Answer 4

是的，之前的假是很棒的。但是，您可以使用另一种方法使用任何css网格轻松实现：

CSS：

.red{
  border: 2px solid deeppink;
  position: relative;
  top: -1px;
}

HTML：

<div class="container">
  <hr class="red col-sm-6" /><hr class="col-sm-6" />
</div>

JsFiddle

Answer 5

你可以这样做：在选择者之前/之后。

SCSS：

hr {
  overflow:initial;

  &:after {
    content:'';
    width:50%;
    height:3px;
    display:block;
    background:red;
    top:-2px;
    position:relative;
  }
}

尝试使用我为您创建的这个小提琴： https://jsfiddle.net/fwzs8uy0/

就个人而言，我会使用div而不是HR。

Answer 6

您可以使用两个> If the Cubs can win the World > Series, Donald Trump can win the presidency, and the Cowboys can win > 11-straight, then I can survive finals ：

来完成

＆＃13;

＆＃13;

hr

＆＃13;

hr {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
  box-sizing: border-box;
}

hr:first-of-type {
  height: 5px;
  border: none;
  background: red;
}

＆＃13;

＆＃13;

＆＃13;

Answer 7

使用线性渐变。这可能会对你有所帮助。

if ($result[0] == NULL)
    continue;