How to make Dynamic line in CSS?

[QQ_cazo]

<!-- HTML RENDERED-->
<div id="comment_43" class="comment">
                <div class="user">wffwwffw <span class="time timeago" data-date="2021-08-24 10:20:37"></span></div>
                <div class="userComment">qqqq</div>
                <div class="reply">
                    <a href="javascript:void(0)" data-commentid="43" onclick="reply(this)">REPLY</a>
                </div>
                <div class="replies">
            <div id="comment_11" class="comment">
                <div class="user">459937721 <span class="time timeago" data-date="2021-08-27 06:51:36"></span></div>
                <div class="userComment">penis</div>
                <div class="reply">
                    <a href="javascript:void(0)" data-commentid="11" onclick="reply(this)">REPLY</a>
                </div>
                <div class="replies">
                        </div>
            </div>
        
                        </div>
            </div>
<div id="comment_42" class="comment">
                <div class="user">wffwwffw <span class="time timeago" data-date="2021-08-24 10:14:22"></span></div>
                <div class="userComment">pppeeee</div>
                <div class="reply">
                    <a href="javascript:void(0)" data-commentid="42" onclick="reply(this)">REPLY</a>
                </div>
                <div class="replies">
                            
            <div id="comment_12" class="comment">
                <div class="user">459937721 <span class="time timeago" data-date="2021-08-27 08:59:40"></span></div>
                <div class="userComment">wffffffff</div>
                <div class="reply">
                    <a href="javascript:void(0)" data-commentid="12" onclick="reply(this)">REPLY</a><div class="row replyRow" style="display: none;">
    <div class="col-md-12">
        <textarea class="form-control" id="replyComment" placeholder="Add Public Reply" cols="30" style="height: 20%;resize: none;min-height: 60px;"></textarea><br>
        <button style="float:right" class="btn-primary btn" onclick="isReply = true;" id="addReply">Add Reply</button>
        <button style="float:right" class="btn-default btn" onclick="$('.replyRow').hide();">Close</button>
    </div>
</div>
                </div>
                <div class="replies">
                            
            <div id="comment_13" class="comment">
                <div class="user">459937721 <span class="time timeago" data-date="2021-08-27 08:59:44"></span></div>
                <div class="userComment">wffwfwwfwf</div>
                <div class="reply">
                    <a href="javascript:void(0)" data-commentid="13" onclick="reply(this)">REPLY</a>
                </div>
                <div class="replies">
                        </div>
            </div>
        </div>
            </div>
        </div>
            </div>

CSS
        .comment {
            margin-bottom: 20px;
        }

        .user {
            font-weight: bold;
            color: black;
        }

        .time, .reply {
            color: gray;
        }

        .userComment {
            color: #000;
        }

        .replies .comment {
            margin-top: 20px;
        }

        .replies {
            margin-left: 20px;
        }

        #registerModal input, #logInModal input {
            margin-top: 10px;
        }

        .fas {
            margin-right: 10px;
        }

my goal:

COMMENT

| REPLY

COMENT

| REPLY

|  | REPLY

|    | REPLY

| REPLY

just like reddit, how can i do this?

[IAmAndre]

The CSS isn't meant to be dynamic. Your HTML must be rendered in a way that allows this layout to happen. For example, you may have comments embedded into one another, and each comment may have the same "comment" class, which is shifted to the right (from the left side of its container). Hope that makes sense.

[Eigenvektor]

Stuff like this typically uses either server side rendering (PHP) or client side rendering (JS/TS). The HTML/CSS itself is static. Instead when the content is loaded (e.g. with JavaScript) it determines the level of indentation that is needed for a comment and then selects the appropriate CSS class(es) to use or nests the DIVs in a way that causes the indentations to stack up.

[QQ_cazo]

5 hours ago, Eigenvektor said:

Stuff like this typically uses either server side rendering (PHP) or client side rendering (JS/TS). The HTML/CSS itself is static. Instead when the content is loaded (e.g. with JavaScript) it determines the level of indentation that is needed for a comment and then selects the appropriate CSS class(es) to use or nests the DIVs in a way that causes the indentations to stack up.

i use PHP as a backend, the DIVs auto nest themselves, i just need to fiugre out how to put a line next to them (one that will fit the height of the nested div)

[Eigenvektor]

2 hours ago, QQ_cazo said:

i use PHP as a backend, the DIVs auto nest themselves, i just need to fiugre out how to put a line next to them (one that will fit the height of the nested div)

Something like this should do it?

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_vertical_line

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.vl {
  border-left: 6px solid green;
}
</style>
</head>
<body>

<h2>Vertical Line</h2>

<div class="vl">
This div has a green 6 pixel wide border on the left<br>
And it grows with the content<br>
And it grows with the content<br>
And it grows with the content<br>
And it grows with the content<br>
</div>

</body>
</html>