CSS : horizontal line, thicker on a portion

Question

(Closed). This question needs details or clarity. It is not currently accepting answers. question from:https://stackoverflow.com/questions/66050453/css-horizontal-line-thicker-on-a-portion

Answer 1

Use a single div, and make the thicker portion .bar::before

.bar{
  background: #AAA;
  height: 3px;
  margin-top: 40px;
  position:relative;
}

.bar::before{
  content: '';
  display: block;
  width: 30%;
  background: #B5651D;
  height: 10px;
  position:absolute;
  top:-10px;
}

<div class='bar'></div>