How to code this kind of border

I’m trying to find the simplest and most semantic way to style a border like the attached.

Hi there Braveheart4,

is it your desire to have 3 or 4 lines of text as a border?

Or am I missing a desire for something slightly more subtle?

coothead

Simply create new div and write rules in CSS

<div class="line"></div>

Then just define rules for .line

I just want to make that 1px light grey border, which is fixed in width at about 120px and does not extends the width of the red link in the attached screenshot.

So if I use the box created by the link, the it will follow the width of the link, but I don’t want that. Any tips without too much DIV nestings?

Do you mean the short horizontal line before the red text?
Is it a border or is it a <hr>?
If it is a border, is it a top border on the red text or a bottom border on the black text?
Did you look at the code where you found it?

It’s a design I’m working on. And yeah, apparently I need an extra DIV element, or better HR as it’s more semantic.

I was trying with a <hr> but have not got it to stay on the left yet, so trying with border-top.

Also you can use> ::after selector on parent DIV and set them border-bottom and margins.

Check this out.

Splendid. I vote for this fix. But I guess I’ll stick to creating an extra DIV with border settings, because that’s the only way I can with Webflow.

I didn’t use this website tool, so I don’t know, but if you could create new div and write rules for It, then you can easily use ::after in CSS on specific element.

I have not idea, why you are limited here.

I think this is a compliation of everyone’s suggestions. They all work.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>hr tester</title>
<!--
https://www.sitepoint.com/community/t/how-to-code-this-kind-of-border/208528
Braveheart4
Nov 28, 12:15 PM
-->
    <style type="text/css">

hr {
    width:120px;
    border:none;
    border-top:1px solid #eee;
    border-bottom:1px solid #ccc;
    margin:1em 0;
}

.shortline {
    width:120px;
    border-top:1px solid #eee;
    border-bottom:1px solid #ccc;
    margin:1em 0;
}

p::before {
    content:"";
    display:block;
    width:120px;
    border-top:1px solid #eee;
    border-bottom:1px solid #ccc;
    margin:1em 0;
}

    </style>
</head>
<body>

<hr>

<div class="shortline"></div>

<p>I am a short paragraph.</p>

</body>
</html>
1 Like

Keep in mind that HR is not just a decorative element and has a SERIOUS semantic meaning-- representing a thematic break-- ( especially prior to HTML5). It is possible that’s what you may be needing ( but it depends on your content).

Use the HR if it’s semantically correct; if it’s your border is PURELY decorative you could use the :after or ::after pseudo elements.

I think that may be the only way to do so without introducing a tag for purely decorative reasons (it would work, but ugh)

I tried a bit with border-image linear-gradient but the results (likely due to my inexpertise) are wonky

{ 
 padding-bottom: 4em;
 border: 20px solid transparent;
 border-top: 0;
 border-right: 0;
 border-image: linear-gradient(to right, #000 50%, transparent);
}

.

I was trying something similar with a gradient border, but could not get it to work.
Some examples here.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.