Inhalt des Anchor-Tags bearbeiten

Question

Ich habe versucht, den Inhalt des Anchor-Tags zu bearbeiten, aber ich verstehe nicht, wo ich falsch liege. Hier ist der Code, den ich

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

Below bearbeiten müssen, ist meine Lösung, die ich habe versucht,

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

Kann jemand mich in die richtige Richtung?

Answer 1

Ich bin in der Lage, die Wirkung zu erzeugen, indem pseudo-elements mit und eine Kombination aus marginspadding und z-index

Das ist reine CSS aber Hacky besten zwicken.

Dies muss weiter optimiert werden, damit es zu Ihrem aktuellen Inhalt passt.

Arbeitsbeispiel:

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