I want to generate line as like attached image using HTML/CSS-CodePudding

I want to generate line as like attached image using HTML/CSS

I have tried with two different divs but not generating result as expected.

Any idea on this.

I have tried with two different divs but not generating result as expected.

CodePudding user response：

You can achieve this using ::after and content in the css.

    <!DOCTYPE html>
    <html>
    <style>
    #demo {
    position:relative;
    border-bottom:2px solid black;
    }
    #demo:after{
    content:"";
    border:3px solid red;
    position:absolute;
    width:10%;
    left:0;
    bottom:-4px;
    }
    </style>
    <body>
    <p id="demo">This is a paragraph</p>
    </body> 
    </html>

This is just an example to show you how it works. You can customize it according to your need.

CodePudding user response：

This may help you.

https://www.w3schools.com/tags/tag_hr.asp

It also gives a test demo on the page, but it might help you with your line on the page, I have used some of their code and they are very helpful.

    <!DOCTYPE html>
<html>
<body>

<h1>The Main Languages of the Web</h1>

<p>HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page, and consists of a series of elements. HTML elements tell the browser how to display the content.</p>

<hr>

<p>CSS is a language that describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work, because it can control the layout of multiple web pages all at once.</p>

<hr>

<p>JavaScript is the programming language of HTML and the Web. JavaScript can change HTML content and attribute values. JavaScript can change CSS. JavaScript can hide and show HTML elements, and more.</p>

</body>
</html>