Jump to content

How do you place a line either side of text in CSS?


simona6

Recommended Posts

I've seen various methods but I can't see a good one to apply a vertically aligned line either side of text.

Obviously you use a ::before and ::after, but if you do that, you can do it with a % width, and then you have to assign a width to the Text itself which varies based on width of screen.

So how do you do it effectively?

Link to comment
Share on other sites

image.png.641408b3cd112560e7e869ea09b82c0e.png

<style type='text/css'>
    .lr-border {
        display: inline-block;
        border-left: 3px solid gray;
        border-right: 3px solid gray;
        padding: 0 8px;
        margin: 30px 10px;
    }
</style>

    <div class='lr-border'>
        Are you wanting something like this?
    </div>
    <br>
    <div class='lr-border'>
        ( where the width adjusts automatically with the text length )
    </div>

 

  • Great Answer 1
Link to comment
Share on other sites

  • 2 weeks later...

Apologies - I mean Horizontal.

 

------ like this -------

(but not dashed... and responsive).
I've seen it done with some page builders, but can't see how to do it manually in CSS.

Link to comment
Share on other sites

  • 4 weeks later...

My code...

<!DOCTYPE html>                              
<html lang='en'>
<meta charset='utf-8'>
<head>
<title>Example</title>
<style type="text/css">
    body {
        font-family: verdana, sans-serif;
        font-size: 12pt;
        padding: 20px;
    }
    h2 {
        font-variant: small-caps;
        text-align: center;
    }                                   
    .chapter {
        width: 100%;
        margin-top: 20px;
        margin-bottom: 20px;
        border-bottom: 5px solid blue;
        text-align: center;
    }
    .head-text {
        display: inline;
        padding: 0 10px;
        background-color: white;
        font-family: gabriola, cursive;
        font-size: 20pt;
        font-style: italic;
        font-weight: 600;
        position: relative;
        top: +26px;
    }
    p {
        text-align: justify;
        line-height: 22px;
    }
</style>
</head>
<body>
<h2>Book 3</h2>
<div>
    <div class='chapter'>
        <div class='head-text'>
            Caput vigesimum septimum
        </div>
    </div>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. 
        Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo 
        magna eros quis urna.
        </p>

        <p>Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget 
        neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse 
        dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, 
        felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. 
        Donec ut est in lectus consequat.
        </p>

    <div class='chapter'>
        <div class='head-text'>
            Epilogus
        </div>
    </div>

        <p>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi 
        tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy 
        pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
        </p>
</div>
</body>
</html>

image.png.c1ed3993d05be31e162071e180bfb2fe.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.