我有一些用户可以添加标记的文本部分。这些内容带有图标。我遇到的问题是使用这些标记突出显示(选择文本)文本。标记在background-image
标记上设置为<i>
属性。
使用以下样式时,图标会突出显示,但需要显示内容:
<i className="my-class">
</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>