CODEWITHSUNDEEP
htmlcss
dmiller8369
dmiller8369

Reputation: 11

Put arrow left and arrow right in a HTML element

I want to make something like this but what I don't know how I can add these right and left arrows.

enter image description here

I tried to write with style inline-block or inline, but it didn't work.

Here is my code:

<div style="color: #ffffff">
  <p style="text-align: center; background-color:#1c3c41; ">Male</p>
</div>

Upvotes: 0

Views: 1791

Answers (3)

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8098

With your current HTML Step Try Below Code. I have used CSS entities and pseudo elements:

.container::before{
  content:"\003C";
  display:inline;
  margin-left:1rem;
  
}

.container::after{
  content:"\003E";
  display:inline;
  margin-right:1rem;
  
}

.container{
  display:flex;
  width:200px;
  background:#000;
  justify-content:space-between;
  align-items:center;
  border-radius:0.5rem
}

WORKING CODE:

.container::before{
  content:"\003C";
  display:inline;
  margin-left:1rem;
}

.container::after{
  content:"\003E";
  display:inline;
  margin-right:1rem;
  
}

.container{
  display:flex;
  width:200px;
  background:#000;
  justify-content:space-between;
  align-items:center;
  border-radius:0.5rem
}
<div class="container" style="color: #ffffff">
  <p style="text-align: center;">Male</p>
</div>

Upvotes: 1

Wali Waqar
Wali Waqar

Reputation: 385

Here's one way to achieve what you want

.container {
  display: flex;
  flex-direction: horizontal;
  width: 200px;
  justify-content: space-between;
  background-color: #ccc;
  padding: 7.5px;
  border-radius: 15px;
}

.arrow {
  border-radius:50%;
  background-color: #eee;
  padding: 2px 6px;
}

.arrow:hover {
  cursor: pointer;
}
<div class="container">
  <div class="arrow"><</div>
  <div class="text">male</div>
  <div class="arrow">></div>
 </div>

Upvotes: 0

Ayush
Ayush

Reputation: 576

Here is the code you are looking for just paste this in your HTML and you will get the desired result

<!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
        style="height: 30px; color: white; background-color: #1c3c41; display: flex; justify-content: space-between; align-items: center;">
        <div style="display: inline;">
            <img style="filter: invert(100%);" src="https://www.flaticon.com/svg/static/icons/svg/860/860790.svg" alt=""
                width="16" height="16">
        </div>
        <div style="display: inline;">
            <p style="display: inline; text-align: center; background-color:#1c3c41; ">Male</p>
        </div>
        <div style="display: inline;">
            <img style="filter: invert(100%);" src="https://www.flaticon.com/svg/static/icons/svg/54/54833.svg" alt="" width="16" height="16">
        </div>
    </div>
</body>

</html>

enter image description here

Upvotes: 0

Related Questions