Question

我正在尝试为链接设置标题（而不是工具提示）的样式。但我无法理解如何设计风格。

我的代码在这里。我不想通过添加伪元素以及元素之前和之后来设置样式。

＆＃13;

<!DOCTYPE html>
<html lang="en-US">


<body>

<h2>Link Titles</h2>
<p>The title </p>
<a href="#" title="this is the title i want to style">Visit our HTML Tutorial</a>



</body>
</html>

＆＃13;

如何设置悬停在锚标记上时显示的标题。

Answer 1

您不能直接设置样式，但可以使用伪元素创建相同的效果。

a[myTitle]:hover {
  position: relative;
}

a[myTitle]:hover:after {
  content: attr(myTitle);
  position: absolute;
  left: 0;
  top: 100%;
  background: #000;
  color: #fff;
  padding: .5rem 1rem;
  z-index: 1000;
  white-space: nowrap;
}

<h2>Link Titles</h2>
<p>The title </p>
<a href="#" myTitle="this is the title i want to style">Visit our HTML Tutorial</a>

如何为特定锚标签或div设置纯HTML标题的样式？

1 个答案: