How to underline part of a heading (first 40px for instance)?

Question

Is it possible in simple CSS to have a heading underlined partly only, specifically first 50px on the left?

Answer 1

You can use the :before pseudo element and add a border to it.

h1 {
  position: relative;
  line-height: 1.2em;
}
h1:before {
  position: absolute;
  left: 0;
  top: 1.2em;
  height: 0;
  width: 50px;
  content: '';
  border-top: 1px solid red;
}

<h1>This is a header, partly underlined</h1>