Sign in

Is it possible to make horizontal line display as an actual line

  • This topic has 4 replies, 3 voices, and was last updated 1 year, 3 months ago by .
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #8074
    Avatar photoKemikalElite

    When I preview a page in my browser it looks like 3 dots with a lot of extra space in between as in the screenshot below:

    However with my old editing method, using a regular markdown editor and exporting to HTML it appears as an actual line as in this screenshot:

    Is there a way to change it to appear as a regular line or is this just the only way the program works?

    I tried different themes however it doesn’t change the line break.

    Avatar photocandidexmedia

    You’ll want to either modify or override the style for the <hr> tag in CSS.

    Here is what it looks like in Inspect Element:

    Here are some ways of making <hr> a line:



    Avatar photoitips3727


    Sure, you can add a single ‘plain’ horizontal line for < hr > (I’ve added a space either side of hr here purely for display purposes, so normally, there should be no spaces).

    I’ve tested the following fix on several current themes. It seems the most recent themes have the necessary CSS code built in.

    After you’ve added the default < hr > as shown in your first screenshot above, assuming you’re using WYSIWYG view, choose the ‘<> HTML’ button on the editor bar to view the code.

    Find your < hr > then change:



    <hr class="separator--long-line">

    Once you’ve saved your changes on the page, when you preview the page or the site, the page on which you’ve made the change should display your ‘plain’ horizontal line.

    Avatar photoitips3727

    Following up on my last comment above, more information is available under the ‘Separator’ subheading on:

    Avatar photoitips3727


    To clarify further, as outlined on if you use the Block editor to create your page in Publii, for this exercise, you don’t need to be concerned with code. Just create the default horizontal line with the Block editor, then use the command to change the default line from, say, 3 stars to a ‘plain line’. Works great.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.