I have a code similar to this below but I can't seem to get it to work. I want the bottom line to the right side above and below the text;
<!DOCTYPE html>
<html>
<head>
<style>
.row feature:before {
content : "";
position: absolute;
right : 18.75%;/**/
bottom : 0;
height : 1px;
width : 25%; /* or 100px */
border-bottom:1px solid magenta;
}
</style>
</head>
<body>
<div id="features">
<div class="row" style="margin-top: 20px; width: 100vw;">
<div class="small-12 medium-9 small-centered columns">
<section class="row feature">
<a>
<div class="medium-4 small-12 columns" style="border-radius:28px; border: solid thin #38D9D6; -webkit-box-shadow: 1px 1px 2px 3px #ccc; -moz-box-shadow: 1px 1px 2px 3px #ccc; box-shadow: 1px 1px 2px 3px #ccc; height:300px; width:300px; background-color: #EDA3A4;">
<div class="carousel-caption">
<h3> Chat Bot</h3>
</div>
</div>
</a>
<div class="medium-8 small-12 columns" style="color: black; font-family: 'Josefin Sans', sans-serif; margin-top: 6.25%; text-align: center;">
<h2 style=" font-size: 1.6em; font-weight: 500;">Chat Bot</h2>
<p style="color: black; font-family: 'Josefin Sans', sans-serif; font-size: 1.3em; font-weight: 100;">This feature is able to respond to most of your questions instantly.<br>You can ask as many questions as you can once you register and personalize your settings.<br> Welcome aboard.</p>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
