html - 在纯 CSS 工具提示中允许 html 标记

Question

我有这个纯 CSS 工具提示。

<span data-tooltip="The security code is a 3-digit number<br />on the back of your Visa or Mastercard debit or credit card, or a 4-digit number on the front of your American Express card.">Help</span>

我可以允许像 <br /> 这样的 html 吗？在里面？

.tooltip {
  position: relative;
  top: 3px;
  display: inline-block;
  width: 1.23809524em;
  height: 1.23809524em;
  border-radius: 50%;
  background: #252525;
  text-align: center;
  cursor: pointer;
}
.tooltip .tooltip__anchor {
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  position: absolute;
  top: -5px;
  left: 6px;
}
.tooltip .tooltip__text {
  transition: 0.2s ease;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  text-align: left;
  z-index: 10;
  position: absolute;
  width: 280px;
  background: #fafafa;
  border: 1px solid #ececec;
  padding: 0.61904762em;
  left: 1.48571429em;
  top: -0.92857143em;
  opacity: 0;
  pointer-events: none;
  cursor: default;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.04);
  line-height: 20px;
}
.tooltip:hover .tooltip__text {
  opacity: 1;
}
.tooltip:last-child {
  margin-left: 0.92857143em;
}
[data-tooltip] {
  position: relative;
  overflow: visible;
}
[data-tooltip]:after {
  transition: all .2s ease;
  content: attr(data-tooltip);
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: #252525;
  color: #fff;
  border: 1px solid #e7e7e7;
  padding: 2px 12px;
  pointer-events: none;
  white-space: nowrap;
  font-size: 11px;
  line-height: 18px;
  font-weight: 600;
  border-radius: 2px;
  z-index: 2;
  font-family: 'Open Sans';
}
[data-tooltip]:not(:hover):after {
  opacity: 0;
}

<br /><br /><br />
<span data-tooltip="The security code is a 3-digit number<br />on the back of your Visa or Mastercard debit or credit card, or a 4-digit number on the front of your American Express card.">Help</span>
<br /><br /><br />

谢谢。

---

JSFiddle:https://jsfiddle.net/buhdkmpj/

Answer 1

引用章节的相关部分12.2 The 'content' property CSS 2.1 规范(强调我的):

attr(X)
This function returns as a string the value of attribute X for the subject of the selector.

因此，属性值中的 HTML 标记将被视为字符串，而不是被解析。

---

但是，您仍然可以在工具提示中显示换行符。只需更改 white-space: nowrap的 [data-tooltip]:after至 white-space: pre并用换行符代替 <br />在你的data-tooltip属性。

Analogic demo JSFiddle .