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

Posted 2023-03-06

【中文标题】用于在另一个元素内插入图标的伪元素选择器

【英文标题】：Pseudoelement selector for inserting icon inside of another element

【发布时间】：2017-11-09 23:04:54

【问题描述】：

我想使用一些伪元素选择器 (:before, :after) 将文本或图标包含在 :hover 上的某个其他元素内。有没有办法只使用伪元素选择器来做到这一点？我想实际上不更改该元素的内容，因为它的内容是从 localStorage 加载的。

我的愿景是在将鼠标悬停在标题上时在视觉上添加一些可点击的图标（✗、????）。

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

感谢您的建议。

【参考方案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 ;

 

【讨论】：

如果能提供示例代码就更好了

@Swellar 我在上面。 :)

点击时背景图像可以定义一些 javascript 动作吗？还是会通过单击标题的可编辑内容来覆盖？

@BBerry 似乎有可能。在***.com/questions/7478336/…上查看第二个最佳答案

【参考方案2】：

我猜你想要这样的东西？

您还可以在 after 元素或背景图像中使用 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）

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

如果有帮助请告诉我

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>

【讨论】：

X 能对自己采取一些行动吗？我应该在内容中指定吗？谢谢。

你不能用 Jquery 访问伪元素，所以它不能有任何动作。您可以使用 Jquery 添加一个元素，然后给该元素一个动作。你想要那个吗？

我认为存在不需要 jQuery 的解决方案。可以在这里使用类似于***.com/a/23243996/6018512 的东西吗？

@BBerry 正如您在该答案中看到的那样，使用了javascript。所以你不能只使用css。你可以用javascript吗？

我不反对使用纯 JavaScript:D 这就是答案，不是吗？我宁愿不使用jQuery。如果这有道理的话。

【参考方案3】：

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