(Extra) <span> toevoegen aan (menu)labels

[ikvanwinsum]

Het lijkt mij een gaaf idee om custom css een stukje leuker te maken.

Door het toevoegen van een extra <span> in bijvoorbeeld menu-items kan de tekst met behulp van custom CSS aangepast worden.

Wat bedoel ik er precies mee?
Een voorbeeldje, het hoofdmenu:
Nu ziet het er ongeveer zo uit:

HTML:

<ul id="navMenu">
    [...]
    <li><a href="https://tweakers.net/nieuws/">Nieuws</a></li>
    <li><a href="https://tweakers.net/reviews/">Reviews</a></li>
    [...]
    <li class="more last"><span>Meer</span>
        <div>
            <ul>
                <li><a href="https://tweakers.net/video/">Video</a></li>
                <li><a href="https://tweakers.net/downloads/">Downloads</a></li>
                [...]
            </ul>
        </div>
    </li>
</ul>

Het is nu heel moeilijk om 'Nieuws' en 'Reviews' door iets leukers te vervangen. Door een extra <span> toe te voegen zou dat een stuk makkelijker worden. Zoiets:

HTML:

<ul id="navMenu">
    [...]
    <li><a href="https://tweakers.net/nieuws/"><span>Nieuws</span></a></li>
    <li><a href="https://tweakers.net/reviews/"><span>Reviews</span></a></li>
    [...]
    <li class="more last"><span>Meer</span>
        <div>
            <ul>
                <li><a href="https://tweakers.net/video/"><span>Video</span></a></li>
                <li><a href="https://tweakers.net/downloads/"><span>Downloads</span></a></li>
                [...]
            </ul>
        </div>
    </li>
</ul>

Dan kan met de volgende CSS de naam gewijzigd worden:

Cascading Stylesheet:

#navMenu li:nth-child(3) a span {
    display: none;
}
#navMenu li:nth-child(3) a::after {
    content: "Nieuwtjes";
}

Gaaf idee, maar waarom heb je per se een extra <span> nodig?
Nou, zonder extra span is het nogal moeilijk om de oude tekst weg te halen. Ja, het kan met display:none; maar dan wordt de box niet groter bij het toevoegen van tekst via ::before of ::after.
Het zetten van visibility:hidden; zou een andere optie zijn, maar dan ben je gebonden aan de grootte van de oorspronkelijke box, wat (te) veel beperkt en vaak nogal lelijk staat.

[Hero of Time]

Als je al wat kan veranderen nu, waarom zou je dan de breedte niet kunnen aanpassen?

[ikvanwinsum]

Met behulp van content kan i.c.m. een ::before of ::after pseudo-element content worden toegevoegd aan een item. Het kan niet worden gebruikt om inhoud te vervangen. Dit gaat dus niet werken:

HTML:

<ul id="menu">
    <li><a href="#>Oude tekst</a></li>
</ul>

Cascading Stylesheet:

#menu li a {
    content: "Nieuwe tekst";
}

De output zal gewoon Oude tekst zijn.
Met het ::after pseudo-element kan hier tekst achter worden geplaatst:
[/code]

Cascading Stylesheet:

#menu li a::after {
    content: " en nieuwe tekst";
}

Output: Oude tekst en nieuwe tekst
Maar nog steeds is Oude tekst nog niet verdwenen.
Dit kan worden opgelost met behulp van visibility:hidden; of display:none;

Methode 1: visibility:hidden;

Dit betekent dat het element onzichtbaar gemaakt wordt. Het element wordt echter nog wel gerenderd. Het neemt dus nog wel de oorspronkelijke ruimte in. Deze ruimte kan gebruikt worden door de nieuwe tekst. Een voorbeeldje:

Cascading Stylesheet:

#menu li:nth-child(2) a {
    visibility: hidden;
    position: relative;
}

#menu li:nth-child(2) a::after {
    visibility: visible;
    content: "Babbelboxen";
    left: 0;
    position: absolute;
}

Het nadeel van deze aanpak is dat de breedte al gedefinieerd is door de oude tekst, en je - als de nieuwe tekst niet exact dezelfde lengte heeft - ruimte overhoudt of tekort komt.

Methode 2: display:none;

display:none; zorgt ervoor dat het geselecteerde element niet zichtbaar is en zelfs niet gerenderd wordt. Dit betekent dat het ook geen ruimte in de DOM meer inneemt. Dit geldt zelfs voor eventuele children van het element, die worden ook niet gerenderd. Dit is de reden waarom deze methode niet werkt zonder extra tag.

Als we een extra <span> toevoegen kunnen we dit probleem omzeilen:

HTML:

<ul id="menu">
    <li><a href="#><span>Oude tekst</span></a></li>
</ul>

Cascading Stylesheet:

#menu li:nth-child(2) a span {
    display:none;
}
#menu li:nth-child(2) a::after{
    content: "Nieuwe tekst";
}

De hele <span> wordt nu niet meer gerenderd. Dit is geen probleem, die tekst hebben we toch niet meer nodig. Belangrijk is dat het <a> element nog wel gewoon zichtbaar is, zonder tekst erin. Die tekst kunnen we nu gaat toevoegen met ::after.

Zie voor meer informatie ook deze blogpost:
https://blog.escapecreati...to-replace-text-with-css/

Zo een beetje duidelijk?

[Hero of Time]

Ik ben prima bekend met CSS. Ik heb heel wat al aangepast hier. Daarom vat ik niet helemaal waarom je zegt dat dit niet zo lekker zou werken:

Cascading Stylesheet:

#menu li:nth-child(2) a {
    visibility: hidden;
    position: relative;
}

#menu li:nth-child(2) a::after {
    visibility: visible;
    content: "Babbelboxen";
    left: 0;
    position: absolute;
}

Terwijl je het ook met dit zou kunnen oplossen, een enkele toevoeging:

Cascading Stylesheet:

#menu li:nth-child(2) a {
    visibility: hidden;
    position: relative;
    /* Dit is dus toegevoegd, uitgaande dat het element <200 pixels was en met 200px groot genoeg is. */
    width: 200px;
}

#menu li:nth-child(2) a::after {
    visibility: visible;
    content: "Babbelboxen";
    left: 0;
    position: absolute;
}

Dus, waarom zou mijn enkele regel code extra niet werken?

[Hahn]

Waarom zou je de tekst van de menu-items aan willen passen? Wat wil je met die teksten gaan doen?

edit:

Als ik je goed begrijp, dan wil je van bijvoorbeeld 'Nieuws' iets als 'Nieuwtjes' maken. Leuk dat jij dat wilt, maar om nou aan Tweakers te vragen om extra code toe te voegen, wat voor 99,99% van de gebruikers letterlijk loze code is, vind ik wat overdreven eigenlijk

[ Voor 61% gewijzigd door Hahn op 08-03-2018 20:14 ]

[crisp]

Think outside the box:

Cascading Stylesheet:

#menu li:nth-child(2) a {
  font-size: 0;
}
#menu li:nth-child(2) a::after {
  content: "Nieuwtjes";
  font-size: 15px;
}

[Hero of Time]

Ha, briljant! Zoals verwacht natuurlijk.

[ikvanwinsum]

crisp schreef op donderdag 8 maart 2018 @ 20:14:
Think outside the box:

Cascading Stylesheet:

#menu li:nth-child(2) a {
  font-size: 0;
}
#menu li:nth-child(2) a::after {
  content: "Nieuwtjes";
  font-size: 15px;
}

Ah ja, dat werkt natuurlijk ook gewoon. Iets beter nadenken de volgende keer voordat ik een topic open. I stand corrected.

Wat mij betreft kan dit topic dan wel gesloten worden.