Prevent CSS on Anchor
February 22, 2025 ยท AI Conversations
User
prevent any a css applying here
Assistant
To prevent any CSS from affecting the “ element and its contents, you can use the `all: unset;` property in an inline `style` attribute. This resets all inherited and applied styles. Here's the updated code:
<a href="tel:0744495500" style="all: unset; display: inline-block;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<mask id="mask0_512_401" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect width="24" height="24" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_512_401)">
<path d="M18.9312 20C17.2454 20 15.5172 19.5779 13.7467 18.7338C11.9762 17.8894 10.3282 16.7044 8.80249 15.1788C7.28965 13.6533 6.11107 12.0084 5.26674 10.2443C4.42257 8.48009 4.00049 6.75508 4.00049 5.06925C4.00049 4.76925 4.10049 4.516 4.30049 4.3095C4.50049 4.10317 4.75049 4 5.05049 4H7.52349C7.79532 4 8.03249 4.08558 8.23499 4.25675C8.43765 4.42792 8.5749 4.6475 8.64674 4.9155L9.14274 7.3C9.1889 7.5795 9.18057 7.82375 9.11774 8.03275C9.0549 8.24175 8.94399 8.41292 8.78499 8.54625L6.59099 10.5923C7.00115 11.3371 7.45465 12.0291 7.95149 12.6683C8.44832 13.3074 8.97815 13.9128 9.54099 14.4845C10.1217 15.0653 10.7467 15.6054 11.416 16.1048C12.0852 16.6041 12.8197 17.0756 13.6197 17.5193L15.7582 15.3423C15.9211 15.1666 16.1041 15.0509 16.3072 14.9953C16.5104 14.9394 16.7351 14.9282 16.9812 14.9615L19.085 15.3923C19.3568 15.4589 19.5774 15.5958 19.7467 15.803C19.9159 16.01 20.0005 16.2475 20.0005 16.5155V18.95C20.0005 19.25 19.8973 19.5 19.691 19.7C19.4845 19.9 19.2312 20 18.9312 20Z" fill="#BD131F"/>
</g>
</svg>
</a>
### Explanation:
– `all: unset;` resets all properties (margin, padding, font, color, etc.), making the “ behave like a plain HTML element.
– `display: inline-block;` ensures it still behaves like a clickable element.
Let me know if you need further tweaks! ๐