CODEWITHSUNDEEP
cssreactjs
zine31
zine31

Reputation: 13

How to add a horizontal line on the right after a button in the left in css?

I want to add a line just after this button on the right side. Thank you.

This is the code:

<button onClick={()=> this.onAddContact(test.name)} className="ds-fake-label">
  <svg xmlns="http://www.w3.org/2000/svg" className="arrow-add-contact" height="24" viewBox="0 0 24 24" width="24">
    <path d="M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z" />
    <path d="M0 0h24v24H0z" fill="none" />
  </svg>
  Add Contact
</button>

Upvotes: 1

Views: 60

Answers (1)

user13682461
user13682461

Reputation:

You can add a div and style it as

.line{
    border-bottom:1px solid black;
    width:50%;
    position:absolute;
    left:65px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

 <button
  onClick="{() => this.onAddContact(test.name)}"
  className="ds-fake-label"
 >Button</button>
 <div>
 <div class="line"></div>
 </div>
</body>
</html>

Upvotes: 1

Related Questions