Pseudoelement selector for inserting icon inside of another element

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.

Alireza · Answer 1 · 2017-06-08T09:59:57.927

2

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 ;

 }

edited Jun 08 '17 at 09:59

answered Jun 08 '17 at 09:46

Alireza

2,319
2
23
35

This would be better if you can provide a sample code – Carl Binalla Jun 08 '17 at 09:47
@Swellar i was on it. :) – Alireza Jun 08 '17 at 09:49
Could background-image have some JavaScript action defined when clicked? Or would that be overridden by the clicking the editable content of the header? – Kit Ostrihon Jun 08 '17 at 10:05
@BBerry it seems possible.check second best answer on https://stackoverflow.com/questions/7478336/only-detect-click-event-on-pseudo-element – Alireza Jun 08 '17 at 10:14

Mihai T · Accepted Answer · 2017-06-08T13:11:08.497

1

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">&nbsp;</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>

edited Jun 08 '17 at 13:11

answered Jun 08 '17 at 09:48

Mihai T

17,254
2
23
32

Would the `X` be able to have some action on itself? Should I specify that in the content? Thank you. – Kit Ostrihon Jun 08 '17 at 10:04
you cannot access pseudo elements with Jquery so it won't be able to have any action. you could add an element with Jquery and then give that element an action. do you want that ? – Mihai T Jun 08 '17 at 10:16
I thought a solution without the need for jQuery would exist. Would something similar to this https://stackoverflow.com/a/23243996/6018512 be possible to use here? – Kit Ostrihon Jun 08 '17 at 11:07
@BBerry as you can see in that answer, javascript is used. so you can't use just css for this. are you ok in using javascript ? – Mihai T Jun 08 '17 at 11:20
I have nothing against using plain JavaScript:D That is that in the answer, is it not? I would just rather not use the jQuery. If that even makes sense. – Kit Ostrihon Jun 08 '17 at 12:18
@BBerry i provided a new plain javascript solution. see if you like it – Mihai T Jun 08 '17 at 13:11

score 0 · Answer 3 · answered Jun 08 '17 at 09:47

0

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

answered Jun 08 '17 at 09:47

Chandra Shekhar

3,550
2
14
22

Pseudoelement selector for inserting icon inside of another element

3 Answers3