Um einen Begriff mit Begriffserklärung in CSS zu erstellen, kann man den :focus Status verwenden. Mit TYPO3 in Kombination mit den CKeditor brauchte ich allerdings eine winzige jQuery-Funktion. 

Ich möchte, das die Redaktion in TYPO3 die Begriffe und Erklärung im CK-Editor pflegen kann. Dafür muss ich meine config.yaml für der ckeditor anpassen. Ich erlaube zuerst span-Elemente mit Klassen: 

processing:
    allowTags:
        – span

editor:
  config:
    extraAllowedContent:
     – span[*]{*}(*)

Das muss ich ggf. auch noch in der contants-Datei machen:

styles.content.allowTags:= addToList(span)

Dann füge ich dem Editor zwei Stile hinzu: Einen für den Begriff und einen für die Erklärung:

editor:
  config:
    contentsCss:
      – "../path/custom_ckeditor.css?v=7"

    stylesSet: [
      { name: "Begriff", element: "b", attributes: {class: "term"}},
      { name: "Hinweisfähnchen", element: "span", attributes: {class: "definition"}},
    ]

Dadurch kann die Redaktion nun den Begriff und die Erklärung im CKEditor definieren. Damit zu sehen ist, was im Editor definiert ist, ergänze ich die Styles in der CSS-Datei, die ich unter contentsCss eingebunden habe:

b.term {font-weight:bold; blue}
b.term:after {
    content: "i";
    display: inline-flex;
    width: 11px;
    height: 11px;
    font-size: 9px;
    color: #ffffff;
    background-color: #0066FF;
    margin-left: 0;
    border-radius: 50%;
    line-height: 0;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-family: ui-monospace;
    position: relative;
    top: -5px;
    margin-right: 0.25rem;
}
span.definition  {
    border:1px solid #FF4200;
    font-size: small;
    z-index: 1000;
    padding: 4px;
    width: fit-content;
    transition: all 0.3s;
    box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.5);
    border-radius: 5px 5px 5px 0;
}

Hier mein HTML im Frontend sieht dann so aus:

<p>Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen 
<b class="term" tabindex="2"><strong>Finsternis</strong></b>
<span class="definition">Wenn es voll krass echt dunkel ist.</span> 
meines Waldes ruht</p>

Dann fehlt noch das CSS (in diesem Fall als SASS) für das Frontend:

.term {        
    cursor: pointer;
    transition: all 0.3s;
    color: $color-04;
    &:after {
        content: "i";
        display: inline-flex;
        width: 15px;
        height: 15px;
        font-size: 13px;
        color: #ffffff;
        background-color: $color-04;'
        margin-left: 0;
        border-radius: 50%;
        line-height: 0;
        text-align: center;
        justify-content: center;
        align-items: center;
        font-family: ui-monospace;
        position: relative;
        top: -13px;
    }
    &:focus{
        color: $color-02;
        background-color: $color-04;
        transition: all 0.3s;
        & + .definition {
            max-width:300px;
            transition: all 0.3s;        
            padding: 2px 10px;
            font-size: $font-size-small;
            transform: translate(-30%, -90%) scale(1);
        }
        &:after {
            background-color: $color-02;
            color: $color-04;
        }
    }
    & + .definition {
        display: inline-block;
        max-width:0;
        position: absolute;
        overflow: hidden;
        background-color: #ffffff;
        border:1px solid $color-05;
        border-radius: 5px 5px 5px 0;
        font-size:0;
        z-index: 1000;        
        padding: 0;
        width:fit-content;
        transition: all 0.3s;
        transform: translate(0, 0) scale(0);
        box-shadow: 0px 0px 5px 0 rgba(0,0,0,0.5);
    }
}

Tja, und leider funktioniert es nicht. Warum? Weil <b> keinen :focus-State hat. Und dafür benötigen wir dann doch etwas Javascript/jQuery. Denn mit dem Anfügen des Attributs tabindex ist das Element mit der Tastatur ansteuerbar und erhält automatisch die Fähigkeit zu :focus-States. Damit man auch wirklich die Tastatur nutzen kann, um von Begriff zu Begriff zu springen, zählt meine Funktion die Vorkommen und setzt den tabindex entsprechend immer einen weiter:

$(document).ready(function () {
    $('.term').each(function (index) {
      $(this).attr('tabindex', index + 1);   
    });
});