Strikethrough On Link Text

Anvil Q&A
1

Is there any way I can show a strikethrough on the text of a link? Or any other component with a click event?

I need to allow some column choices in a data table, but I can’t get check boxes to get close enough together so they don’t take up too much screen. I was going to use links with struck out text for deselected options.

Open to other ideas, too :slight_smile:

2

I’d suggest using the Role mechanism - create a role called strike that applies only to Link components, then add the corresponding CSS in theme.css:

.anvil-role-strike .link-text {
  text-decoration: line-through;
}
2 Likes
3

I’m really not thinking this week, am I?

Thanks again!

4

for some reason I couldn’t get this to work. I just created a general role called ‘strike’ that can be used with any type of components, and copied @meredydd 's text exactly. @david.wylie did you ever get this to work? Or would you have any ideas what I might be doing wrong?

5

Hmm, odd. Could you share a link and perhaps which browser you are using (though I suspect that is not an issue).

6

I think this should work!

https://anvil.works/build#clone:PFXQ6ZQZKHHC6NVH=7I2UDGVL7EQ67IIXANYJJCLD

Thanks @alcampopiano for taking a look

7

I can verify that this may not work. Like you, I cannot get any strike through on firefox or chrome.

@shaun can you shed any light on this potential issue?

1 Like
8

Hi @chesney.l,

This should do the trick, as it applies the text-decoration property to the Label directly:

.anvil-role-strike .label-text {
  text-decoration: line-through;
}

https://anvil.works/build#clone:KFAJWWKF2E225MI3=WUH62JEFTNBX2AIYPHFFPW26

2 Likes
9

Awesome this worked perfectly thank you @bridget!!