How to create a css for in-line text underdot style?

[ycproject]

I want to create a custom css for in-line text underdot effect. I am able to implement custom css for text color, but I can't write css for  underdot.

I also refer to MDN and it always fails to work.

[ycproject]

Problem solved.

First, create a custom.css in _static/css/, then mark it in the conf.py: html_css_files = ['css/custom.css,']

Second, in the rst file:

.. role:: underdot

   :class: underdot

This is a test for underdotted text inline :underdot:`underdotted text`

----------------------------------------------------------------------

Here is the custom.css file:

.underdot {

   text-emphasis: dot;

   text-emphasis-color: #ff0000;

   text-emphasis-position: under;