I recently added the following code to one of my text elements to add a cool underline to it:
border-bottom: 2px solid transparent!important;
border-image: linear-gradient(0.25turn, rgb(0, 0, 0), rgb(255, 0, 0), rgb(255, 204, 0));
border-image-slice: 1;
width: fit-content!important;
It looks like this on chrome and Android: live picture here
However, on iOS devices the border completely surrounds the whole text and looks like this: iOS live picture here
I tried some -webkit and -moz-fit-content type of things but since I am not actively in programming I did not get it to work.
I hope someone can help with this problem and I appreciate your solutions!
Best regards!
In your border-image-slice, give it precision and it will be ok :) I've tested it and it works on Safari v 13.1.2
Aurélie
p {
border-bottom: 2px solid transparent!important;
border-image: linear-gradient(0.25turn, rgb(0, 0, 0), rgb(255, 0, 0), rgb(255, 204, 0));
border-image-slice: 0 0 1 0;
width: fit-content!important;
}<p>Biscuit cake sweet roll. Carrot cake caramels</p>