- This topic has 6 replies, 2 voices, and was last updated 5 years, 11 months ago by
.
I am referring to this page https://cbdfactum.com/product/cbd-factum-patches/ and to the lines as in the attached screenshot.
When I apply this CSS directly in the browser inspector
.woocommerce .woocommerce-tabs li, table, table td, table th { border-style: dotted !important; }then the style of the line changes to dotted – as you can see in the 2nd screenshot.
Adding it to my style.css does NOT work. I purge the cached, reloaded the page with CTRL+F51 – no change. Usually any change in this CSS file is immediately visible.
What am I doing wrong?
Solution for this topic
Hi @CBDFactum,
I hope you are well today and thank you for your question.
It seems the CSS specificity issue so please try using the below CSS code.
.woocommerce #page-container .woocommerce-tabs li { border-style: dotted !important; }Best regards,
Shufflehound teamThank you very much, it works! I appreciate your fast support.
You can close this case.
You are most welcome here 🙂
Hi, is there any way to restrict the length of the dotted underline to the length of the text which is underlined? Thx
OK, I could achieve it with this CSS:
/* underline each li element with length of to the underlined text */ .woocommerce #page-container .woocommerce-tabs ul > li { text-decoration: underline #A9BF16 dotted; } /* hide the original underline in the product description below each li */ .woocommerce #page-container .woocommerce-tabs li { border-style: none !important; }Is there a way to set the padding of the dotted line?
No, we can’t add padding there.
