编辑锚标记的内容

Question

我一直在尝试编辑锚标记的内容，但我不明白我哪里出错了。这是我需要编辑的代码

<div class="entry-content" itemprop="description">
<a class="button color-simple" href="http://techaccessok.org/person/std-speaker-2/" rel="bookmark">Nice to meet you!</a>
</div>

以下是我一直在尝试的解决方案

.entry-content > a {
content : "My Presentation";
}

有人能指出我正确的方向吗？

Answer 1

我可以使用pseudo-elements并调整- margins和padding

的组合来产生效果

这是纯粹的CSS，但充其量只是hacky。

这需要进一步调整，以便与您当前的内容保持一致。

工作示例：

z-index

.entry-content a {
  position: relative;
  padding: 2px 0; /* needs to be modified */
  color: transparent;
  z-index: 2;
}

.entry-content a:after {
  content: "My Presentation";
  display: block;
  padding: 0;
  margin-top: -15px; /* use the same size as your font */
  color: red;
}

.entry-content a:hover:after {
  color: blue;
  text-decoration: underline;
}