CODEWITHSUNDEEP
htmlcss
dglp
dglp

Reputation: 23

wanted CSS property: line separator above heading

I've been looking for a way to define CSS heading properties so that I get a short coloured line a few pixels above the heading text. I do not want a top border, as that stretches all the way across the page.

The various border, outline, background and other properties seem to have no way of specifying length, such as a percentage or number of pixels.

The various CSS techniques for creating standalone separators seem to require a block of code on their own, e.g. a class or id.

For the moment I am using the inline-block and background color properties to create something somewhat similar to what I'm after. But it would be nice to know if there's a way of creating the equivalent of a top border with a length of my own choosing.

Upvotes: 2

Views: 566

Answers (1)

Etheryte
Etheryte

Reputation: 25310

You can simply use pseudo-selectors.

h1:before {
  content: "";
  display: block;
  position: absolute;
  height: 1px;
  width: 50px;
  background: red;
}
<h1>Sample title</h1>

Upvotes: 3

Related Questions