用于在另一个元素内插入图标的伪元素选择器

Question

我想使用一些 pseudo-element 选择器（:before, :after）来在其他元素内的 :hover 上包含文本或图标。有没有办法只使用 pseudo-element 选择器来做到这一点？我想 实际上不更改该元素的内容 因为它的内容是从 localStorage.

加载的

我的设想是在将鼠标悬停在 header 上时在视觉上添加一些 click-able 图标 (✗, )。

<header contenteditable="true" id="title" onkeyup="store(this.id);"></header>

感谢您的建议。

Answer 1

您可以将图标添加为 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

尝试在伪选择器中使用内容属性或将其添加为背景图片

Answer 3

我猜你想要这样的东西？

您还可以在 after 元素或 background-image.

中使用 fontAwesome

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>

选项 2。使用普通 Javascript

使用 javascript 添加了 fontAwesome 图标（beforeend = 插入到 header 标签末尾之前 -> 您可以使用 beforebegin,afterbegin,beforeend,afterend 在此处查看更多信息 insertAdjacentHTML)

然后，您可以在之前添加的图标上添加点击事件。（我在这里切换 header 的 class 改变它的颜色）

如果有帮助请告诉我

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>

用于在另一个元素内插入图标的伪元素选择器

Pseudoelement selector for inserting icon inside of another element

css

hover

css-selectors

pseudo-element