CODEWITHSUNDEEP
cssunderline
drake035
drake035

Reputation: 2877

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

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

Upvotes: 7

Views: 10744

Answers (3)

jayms
jayms

Reputation: 4018

You can add a pseudo element containing a couple of non-breaking spaces that are underlined. This way you get a real underlining instead of a border. However it will still cross over letters like "g".

h1::before {
  content:'\a0\a0\a0\a0\a0\a0\a0\a0';
  display:block;
  position:absolute;
  text-decoration:underline;
  width:50px;
  overflow:hidden;
}
<h1>Headline</h1>
<h1>Another Headline</h1>

Upvotes: 1

Paul
Paul

Reputation: 9022

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>

Upvotes: 19

Vucko
Vucko

Reputation: 20834

Use a pseudo-element:

h1 {
  position: relative;
}
h1::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 50px;
  height: 2px;
  background-color: green;
}
<h1>foobar</h1>

Upvotes: 12

Related Questions