Fixed-length underline

[ajturnersurrey]

I am having a moment trying to implement this, and thought the good people on the Internet might be able to tell me where I'm going wrong.
I want headings to have a 60px line underneath, beginning at the left margin.
I knew underlining wouldn't work, so I've been trying to do something with the bottom border.

I have been using

Code: Select all

border-bottom: solid 4px #1ebbcf;
border-bottom-length: 60px;
border-bottom-align: inherit;

in my stylesheet on a p class.

(I have tried

Code: Select all

border-bottom-align: left;

as well, with identical results.)

The figure shows what happens and where I'd like to move that underline to.

underline drift.png

Can you tell me what is sticking my underline to the right hand margin?

[doloremipsum]

This is really weird... It looks like the border-bottom-length and border-bottom-align settings may only be designed for a specific context (footnotes). It's not standard CSS - I could only find one forum topic (viewtopic.php?f=6&t=32101) linking to one help page (https://help.madcapsoftware.com/flare20 ... tnotes.htm). So I don't think this setting is really designed for general purpose use on headings and other paragraphs - it's just poorly named and categorised.

You might need to find another way to put a short border under your headings!

[Chicago_HPT]

You can use an after pseudo element to create a fake border.

Here is some CSS I took from a SteckInsights post and modified slightly for your purpose. I spaced things out for legibility but you should be able to get rid of the empty lines and move or remove the comments as needed. I used an h1 element here but it should work just as well for any other element, such as a p.

Code: Select all

/* Border to extend to 60px from bottom left corner */

h1::after {
  /* This is necessary for the pseudo element to work. */ 
  content: "";
  
  /* This will put the pseudo element on its own line. */
  display: block; 
  
  /* Change this to whatever width you want. */
  width: 60px; 
  
  /* This creates some space between the paragraph or heading element and the border. Adjust as desired. */
  padding-top: 4px; 
  
  /* This creates the border. Replace the color and width with whatever you want.*/
  border-bottom: 1px solid black;
}

I hope that helps,
-jeff

[ajturnersurrey]

Ooh - that's exciting. I fudged it for a short datasheet with a div after each heading, but this should allow me to set up my user guides differently. Thanks.

--------------------

Sadly it doesn't work in pdf targets - they don't seem to respect the pseudo element - although it does work for html5 targets.