Separate two spans CSS - html

Question

I have a animation where when i hover the icons swing from the right, i want to have it for both of my icons, the delete and edit, but i can't find out which style should i use to separate them and change colors indivitually without messing up the sizing of the icons or the placement.
Html:
import React, { useState } from "react";
import "./App.css";
import axios from "axios";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { faTrash, faPlus, faEdit } from "#fortawesome/free-solid-svg-icons";
function App() {
return (
<>
<div className="backgound">
<div className="wrapper">
<header>Todo app MERN</header>
<div className="inputField">
<input type="text" placeholder="Add your new task"></input>
<button>
<FontAwesomeIcon icon={faPlus} />
</button>
</div>
<ul className="todoList">
<li>
Do something
<span>
<FontAwesomeIcon icon={faTrash} />
<FontAwesomeIcon icon={faEdit} />
</span>
</li>
<li>
Buy something
<span>
<FontAwesomeIcon icon={faTrash} />
<FontAwesomeIcon icon={faEdit} />
</span>
</li>
<li>
Learn something
<span>
<FontAwesomeIcon icon={faTrash} />
<FontAwesomeIcon icon={faEdit} />
</span>
</li>
</ul>
<div class="footer">
<span> You have 3 pending tasks</span>
<button>Clear</button>
</div>
</div>
</div>
</>
);
}
export default App;
The classes i been trying to change to separate them are the .todoList li and .todoList li span
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
::selection {
color: #ffff;
background: rgb(142, 73, 232);
}
body {
width: 100%;
height: 100vh;
padding: 10px;
background: linear-gradient(to bottom, #68EACC 0%, #497BE8 100%);
}
.wrapper {
background: #fff;
max-width: 400px;
width: 100%;
margin: 120px auto;
padding: 25px;
border-radius: 5px;
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
}
.wrapper header {
font-size: 30px;
font-weight: 600;
}
.wrapper .inputField {
margin: 20px 0;
width: 100%;
display: flex;
height: 45px;
}
.inputField input {
width: 85%;
height: 100%;
outline: none;
border-radius: 3px;
border: 1px solid #ccc;
font-size: 17px;
padding-left: 15px;
transition: all 0.3s ease;
}
.inputField input:focus {
border-color: #8E49E8;
}
.inputField button {
width: 50px;
height: 100%;
border: none;
color: #fff;
margin-left: 5px;
font-size: 21px;
outline: none;
background: #8E49E8;
cursor: pointer;
border-radius: 3px;
opacity: 0.6;
pointer-events: none;
transition: all 0.3s ease;
}
.inputField button:hover,
.footer button:hover {
background: #721ce3;
}
.inputField button.active {
opacity: 1;
pointer-events: auto;
}
.wrapper .todoList {
max-height: 250px;
overflow-y: auto;
}
.todoList li {
list-style: none;
height: 45px;
line-height: 45px;
position: relative;
background: #f2f2f2;
border-radius: 3px;
margin-bottom: 8px;
padding: 0 15px;
cursor: default;
overflow: hidden;
}
.todoList li span {
position: absolute;
right: -60px;
color: #fff;
width: 45px;
text-align: center;
background: #e74c3c;
border-radius: 0 3px 3px 0;
cursor: pointer;
transition: all 0.3s ease;
}
.todoList li:hover span {
right: 0px;
}
.wrapper .footer {
display: flex;
width: 100%;
margin-top: 20px;
align-items: center;
justify-content: space-between;
}
.footer button {
padding: 6px 10px;
border-radius: 3px;
border: none;
outline: none;
color: #fff;
font-weight: 400;
font-size: 16px;
margin-left: 5px;
background: #8E49E8;
cursor: pointer;
user-select: none;
opacity: 0.6;
pointer-events: none;
transition: all 0.3s ease;
}
.footer button.active {
opacity: 1;
pointer-events: auto;
}

Answer 1

you forgot a principle: ‌
single responsible principle
So the best way is the component is only responsible for one thing.
So let's make a separate component that gets a conditional rendering based on prop and then be responsible for its own behavior.
You can then wrap them with an element and use flexbox in css.
solution :
1-add "icon_container" className to span
<span className="icon_container">
...
</span>
2-add "font_custom_class" className to FontAwesome
<FontAwsome className="font_custom_class" .../>
3.change some style in css file:
.todoList li {
display : flex;
flex-flow : row;
justify-content : space-between;
list-style: none;
height: 45px;
line-height: 45px;
position: relative;
background: #f2f2f2;
border-radius: 3px;
margin-bottom: 8px;
cursor: default;
overflow: hidden;
padding-left: 15px !important;
}
.icon_container {
width : 100px;
background : red;
display : flex;
flex-flow : row nowrap;
justify-content : center;
align-items : center;
transform : translateX(100px);
transition : all 0.5s;
}
.icon_container > .font_custom_class {
flex-grow: 1;
text-align: center;
}
.todoList li:hover .icon_container {
transform : translateX(0);
}