How to create a line from the left side of the viewport to the end of an element inside a bootstrap-CodePudding

I'm trying to create title that looks like this :

The horizontal line must come from the left side of the viewport and end at the same point the title ends. Ideally I would like to have everything inside a bootstrap column. So my markup looks like this for now :

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="title-with-line">
                <h2>A great title</h2>
            </div>
        </div>
    </div>
</div>

I would like to leave the HTML markup as it is. I can add more elements inside the column, no problem. It would be really good not to put anything outside of that column div.

CodePudding user response：

You can just apply border-top to the title and adjust padding for the same:

.title-with-line {
  width: fit-content;
  border-top: 2px solid black;
  padding-left: calc(2em * 2);
  position: absolute;
  left: 0px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="title-with-line">
                <h2>Nos prestations</h2>
            </div>
        </div>
    </div>
</div>

CodePudding user response：

I finally got a solution that should work on any screen size. Thanks to the responses which led me to this solution :

.title-with-line {
    position: relative;
    margin-top: 25px; /* This margin only to offset the line form the top of the body for demonstration */
}

.title-with-line h2 {
    position: relative;
    float: left;
}

.title-with-line h2:before {
    content: '';
    display: block;
    position: absolute;

    top: 0;
    right: 0;

    width: 100vw;
    height: 1px;

    background-color: black;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col-12">

            <div class="title-with-line">
                <h2>A great title</h2>
            </div>
        </div>
    </div>
</div>

CodePudding user response：

//u have to use <hr> tag for horizontal line.

<!Doctype html>
<html>
<head>
<title></title>
</head>
<body>
<h1>This is example</h1>
<hr>
<h2>This is example 2</h2>
</body>
</html>

CodePudding user response：

This code would do the job

.title-with-line h2 {
  position:relative;
  padding-top:20px;
  display:inline-block;
}
.title-with-line h2:before {
  content:"";
  position:absolute;
  height:1px;
  background:black;
  right:0;
  top:10px;
  width: 50vw;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="title-with-line">
                <h2>A Great Title</h2>
            </div>
        </div>
    </div>
</div>