编辑锚标签的内容

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 和 z-index

的组合来产生效果

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

这需要进一步调整以更好地匹配您当前的内容。

工作示例：

.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;
}

<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>

编辑锚标签的内容

edit content of anchor tag

css

anchor

edit