Style html.P component with .css file

Dash Python
1

Hi all,

I have a html.P component which looks like this:

htm.P("Text | ABC")

I want, that the text before the vertical bar is colored in red. I tried this

html.P("Text | ABC", className="red-text::before")

with the style.css file:

.red-text::before {
  content: " | ";
  color: rgb(255, 0, 0);
}

But the text color will not change. Any idea?

2

Hi @Bakira Iā€™m not an CSS specialist, but I think the before/after does not work like this.

It seems, that you want to use it as some kind of regex.

I would use a html.Span() stack:

        html.P([
            html.Span("Text", className="classOne"),
            html.Span(" | "),
            html.Span("ABC", className="classTwo"),
        ])

css:

.classOne {
    color: red;
}

.classTwo {
    color: blue;
}
2 Likes
3

Hi @AIMPED,

you are fully right. My initial idea was wrong.
With your suggestion it works even better since its more customizable.

Thanks!

1 Like