Вот как на фото, есть линия, и в конце линни такой кружок, как мне сделать такое не ломая адаптивную верстку?
.template__content{
position: relative;
}
.template__modern-loyaut {
top: 0;
position: absolute;
}
.template__customize {
position: absolute;
text-align: right;
right: 0;
bottom: 20%;
}
.template__analityc-title--line2::after {
content: "";
height: 2px;
position: absolute;
width: 50%;
background-color: #5584ff;
display: block;
margin: 10px 0;
}
.template__analityc-title--line1::after {
content: "";
height: 2px;
position: absolute;
width: 50%;
background-color: #5584ff;
display: block;
margin: 10px 0;
}
.template__analityc-title {
font-size: 24px;
font-family: Roboto;
color: #0e1a35;
font-weight: 700;
}
.template__text {
margin-top: 20px;
font-size: 18px;
font-family: Roboto;
color: #8492af;
width: 220px;
height: 60px;
overflow: hidden;
}
.template__img-murcup {
display: block;
max-width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="template__content">
<div class="template__modern-loyaut">
<h3 class="template__analityc-title template__analityc-title--line1">Clean & modern layout</h3>
<p class="template__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="template__screen-murcup">
<img src="http://placehold.it/500x629" alt="screen" class="template__img-murcup">
</div>
<div class="template__customize">
<h3 class="template__analityc-title template__analityc-title--line2">Easy to customize</h3>
<p class="template__text ">Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</div>
</body>
</html>
<html>