如何将项目符号添加到 div 标题？答案

【问题标题】：How to add bullet to div title?如何将项目符号添加到 div 标题？
【发布时间】：2020-01-28 13:20:04
【问题描述】：

是否可以在 div 标题中添加这样的项目符号 (•)？

编辑

我正在尝试从 javascript 代码 (react) 中执行此操作，它在代码中写入“？”签名，而不是 •

&lt;div title="I want bullet"&gt;Hover me&lt;/div&gt;

【问题讨论】：

在title 属性上添加Alt+7 是否有效？
title="• I want bullet"?
试用代码 •带标题
你能分享你的js代码来展示你正在做什么来实现它吗？
在 JS (react) 中你总是可以使用 unicode 版本："\u2022 I want bullet"

标签： javascript html ascii

【解决方案1】：

我们可以在元素上使用before伪元素来实现这一点。

.html

/* Added a title class to the element */
<div class="title" title="I want bullet">Hover me</div>

.css

.title:before {
   content:"\A";
   width:10px;
   height:10px;
   border-radius:50%;
   background: #000;
   margin-right: 5px;
   display:inline-block;
}

【讨论】：

如果您可以简单地在标题中使用&#8226;，为什么要这样做？
将内边距更改为边距，您实际上并不需要 \A
@Douglas Santos，已编辑。谢谢
@NipunJain，问题在于 div 元素。
我想在div title被问到了，我是不是误会了

【解决方案2】：

一般来说，您可以使用 HTML 实体 来替换键盘上不存在的字符。这只是通过从参考页面（如

）查找您所追求的角色来完成

https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

写下它的十进制值 - 对于项目符号点是 8226 - 在这个值之前放一个和一个 ; 并且最后将其添加到您的字符串中。所以

<div title="I want bullet">Hover me</div>

变成

<div title="I want bullet">&#8226; Hover me</div>

不幸的是，虽然这样的数字很难记住，所以也有可能通过它的名字来引用这样的实体。项目符号字符的实体名称是 bull，您可以将其添加到您的字符串中，例如 &bull;

如果您想使用 Javascript 将项目符号点添加到 <div> 元素，您需要使用它的 .innerHTML 属性。

这是一个例子：

document.getElementById("bullet").innerHTML = "&amp;#8226; Hover me";

&lt;div id="bullet"&gt;&lt;/div&gt;

【讨论】：

您以什么方式尝试通过 javascript 添加项目符号点？
我已经完善了我的答案。

【解决方案3】：

使用

<div title="&#8226; I want bullet">Hover me</div>

【讨论】：

【解决方案4】：

我们可以使用li元素的默认CSS在其他元素中创建项目符号。


div{
  display: list-item;
  list-style: list-item;
}

【讨论】：