The more I use the Automatic CSS features, the more I am enamored with the product. Recently, I started using the link features, and they are making my life so much easier. For the past few years, I have been hand-coding links to meet my needs, and while it allowed me to get the results I needed, I kept having to find a workaround for a variety of color scenarios. That is a thing of the past, as ACSS makes it super easy to override as needed.

One feature I really like to use is a hover effect that helps emphasize to the user that they are on a link. ACSS will allow you to change the color, but that is it. I submitted a feature request to add hover settings for the underline thickness and distance, but I am not sure they will be added. Fortunately, it is really easy to add your own. Since a transition has already been applied, there is no need to add another one. The key is to find the CSS that Automatic CSS applies based on the setting. This will include any exclusions you may have added. The following example shows the exclusions for the header and the sharing buttons from BricksExtras.

a:where(:not([class*= btn--], header a, .x-social-share_item a)):hover,a:where(:not([class*= btn--], header a, .x-social-share_item a)):focus{
   text-underline-offset:2px;
  text-decoration-thickness:4px;
}