没有内容的标记不会收到突出显示

时间:2017-07-27 15:59:44

标签: html css highlight

我有一些用户可以添加标记的文本部分。这些内容带有图标。我遇到的问题是使用这些标记突出显示(选择文本)文本。标记在background-image标记上设置为<i>属性。

Screenshot

使用以下样式时,图标会突出显示,但需要显示内容:

<i className="my-class">
  &nbsp;&nbsp;&nbsp;&nbsp;
</i>
.my-class {
  cursor: pointer;

  i {
   display: inline;
  }
}

这是一个不太理想的解决方案,因为它为文本添加了空格,我仍然需要能够引用它。

我可以使用这些样式显示没有内容的图标:

<i className="my-class">
</i>
.my-class {
  cursor: pointer;

  i {
    display: inline-block;
    width: 22px;
    height: 22px;
  }
}

但是元素没有收到突出显示(上面的截图)。

是否有办法让浏览器突出显示使用没有内容的元素,或者以不同的方式显示这些标记与文本内联,以便浏览器认为它们有内容?

测试:

i {
  background-image: url(https://d30y9cdsu7xlg0.cloudfront.net/png/38961-200.png);
  display: inline-block;
  background-size: cover;
  
  height: 1em;
  width: 1em;
}

::selection {
    background-color: red;
}
<p>Pubblication in <i></i> 1717, One Thoa...</p>

0 个答案:

没有答案