[css] Underline van children verwijderen

[Tsjilp]

Ik wil in een <a> tag alleen de textcontent underlined hebben. Eventuele children moeten geen underline hebben.
Dit is de html:

code:

<li class="tab__tab">
    <a href="#panel2">
        Tab 2
        <span class="badge badge--geel">2</span>
    </a>
</li>

En de css

code:

a {
    align-items: center;
    display: flex;
    height: 100%;
    overflow: hidden;
    padding: 0 2rem;
    text-overflow: ellipsis;
    width: 100%;
  
  & > .badge {
      display: inline-block;
      margin-left: 2rem;
      margin-right: -2rem;
      text-decoration: none;
    }
}

De display: inline-block truuk werkt niet, die werkt blijkbaar alleen wanneer je <a> tag een display:inline heeft. Wat in mijn geval niet zo is.

Een extra element toevoegen is geen optie, ik "moet" backwards compatible blijven.

Voor de beeldvorming:

[ Voor 4% gewijzigd door Tsjilp op 04-09-2018 15:42 . Reden: ploatie toegevoegd ]

[killercow]

Nope.

https://jsfiddle.net/F3Grr/8/

https://www.w3.org/TR/CSS21/text.html#lining-striking-props Het parent element geeft de decoration voor het hele element, en dat is dus inclusief alle child elements.

Mischien kun je visuele trucje uithalen waardoor het child element visueel buiten de parent komt te liggen?

Also, je css is niet css, maar een dialect.

[Tsjilp]

Een visueel truukje gaat niet werken, de <li> elementen staan naast elkaar en hebben een dynamische breedte, dus ik kan niet met position absolute oid gaan werken. Daarnaast is het semantisch dan niet meer correct en oh ja, ik moet ook voldoen aan de WCAG webrichtlijnen

En klopt, het is scss

[Mr. Awesome]

Waarom zet je 'tab 2' ook niet in een span, en enkel die span onderlijn je?

Zie https://codepen.io/anon/pen/dqRXjb

[Tsjilp]

hyptonize schreef op dinsdag 4 september 2018 @ 15:44:
Waarom zet je 'tab 2' ook niet in een span, en enkel die span onderlijn je?

Zie https://codepen.io/anon/pen/dqRXjb

Een extra element toevoegen is geen optie, ik "moet" backwards compatible blijven.

^ daarom niet

Dan werkt de underline alleen als ik altijd een extra span toevoeg.

[Merlinni]

Wat als je een after element gebruikt? Beetje hacky maar daarmee kun je het underline effect behalen zonder text-decoration te gebruiken.

[Mr. Awesome]

Merlinni schreef op dinsdag 4 september 2018 @ 16:06:
Wat als je een after element gebruikt? Beetje hacky maar daarmee kun je het underline effect behalen zonder text-decoration te gebruiken.

Daar dacht ik dus ook aan: https://codepen.io/anon/pen/XPgjVr

Maar ik betwijfel alleen of dit voldoet aan de WCAG, aangezien zowel de originele content als de aftercontent voorgelezen wordt door screenreaders.

[Merlinni]

hyptonize schreef op dinsdag 4 september 2018 @ 16:09:
[...]
Maar ik betwijfel alleen of dit voldoet aan de WCAG, aangezien zowel de originele content als de aftercontent voorgelezen wordt door screenreaders.

En wat als we het streepje met de after doen?

https://codepen.io/anon/pen/zJzKPY

[Tsjilp]

Opgelost door de <a> tag geen display: flex maar display: block. Dat icm display: inline-block op de badge zorgt ervoor dat de badge geen underline krijgt.

zie https://codepen.io/anon/pen/gdRwQe

[ Voor 9% gewijzigd door Tsjilp op 04-09-2018 16:17 ]

[Mr. Awesome]

Merlinni schreef op dinsdag 4 september 2018 @ 16:13:
[...]


En wat als we het streepje met de after doen?

https://codepen.io/anon/pen/zJzKPY

Dat zou ook kunnen, maar dan ben je wel meteen het effect van

text-decoration-skip-ink: auto;

kwijt (al weet ik niet of die gewenst is), die Chrome automatisch op links zet.

Edit: Ik zie dat TS het al op een andere manier gefixt heeft.

[ Voor 8% gewijzigd door Mr. Awesome op 04-09-2018 16:20 ]