Pseudoelement selector for inserting icon inside of another element - css

Question

I would like to use some pseudo-element selector (:before, :after) for including a text or icon on :hover inside some other element. Is there a way how to do that only with pseudo-element selectors? I would like to NOT actually change the content of that element as it's content is loaded from localStorage.
My vision is to visually add some click-able icon (✗, 🖉) when hovering over the header.
<header contenteditable="true" id="title" onkeyup="store(this.id);"></header>
Thank you for your suggestions.

Answer 1

You can add your icon as background-image .
header{
position:relative;
}
header:before{
content:" ";
position:absolute;
top:0;
left:0;
width:5px;
height:5px;
background: url(icon.png) no-repeat ;
}

Answer 2

i guess you wanted something like this ?
you can also use fontAwesome in the after element or a background-image.
header {
height:100px;
width:100px;
position:relative;
background:Red;
}
header:after {
content:"X";
position:absolute;
right:0;
top:0;
color:#fff;
transition:0.3s ease-out;
opacity:0;
}
header:hover:after {
opacity:1;
}
<header contenteditable="true" id="title" onkeyup="store(this.id);"></header>
option2. using plain Javascript
added the fontAwesome icon using javascript ( beforeend = inserted right before the end of the header tag -> you can use beforebegin,afterbegin,beforeend,afterend see more here insertAdjacentHTML )
then, you can add a click event on the previously added icon. ( here i am toggling the class of header changing it's color )
let me know if it helps
var newElem = document.getElementById("title");
newElem.insertAdjacentHTML('beforeend', '<i id="clickme" class="fa fa-times-circle" aria-hidden="true"> </i>');
document.getElementById("clickme").onclick = function() {
newElem.classList.toggle('blue');
};
header {
height: 100px;
width: 100px;
position: relative;
background: Red;
transition: 0.3s;
}
header:hover .fa {
opacity: 1;
}
.fa {
color: white;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
opacity: 0;
}
header.blue {
background: blue;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<header contenteditable="true" id="title" onkeyup="store(this.id);"></header>

Answer 3

try using the content attribute in the pseudo selectors or add it as a background image