.css file, ::first-line not possible. how to achieve this? Ubuntu 18.04

Ubuntu 18.04

i am customizing the panel, this is the content in .css file
i have added ::first-line part to cusomize first line as shown in the below image. but it is not applied after reboot.

Content of .css file:

#panel .clock-display {
    color: blue;
    margin-left: 40px;
    margin-right: 40px;
}

#panel .clock-display::first-line {
    color: green; }

Content of .js file:

var DateMenuButton = new Lang.Class({
    Name: 'DateMenuButton',
    Extends: PanelMenu.Button,

    _init() {
        let item;
        let hbox;
        let vbox;

        let menuAlignment = 0.5;
        if (Clutter.get_default_text_direction() == Clutter.TextDirection.RTL)
            menuAlignment = 1.0 - menuAlignment;
        this.parent(menuAlignment);

        this._clockDisplay = new St.Label({ y_align: Clutter.ActorAlign.CENTER });
        this._indicator = new MessagesIndicator();

        let box = new St.BoxLayout();
        box.add_actor(new IndicatorPad(this._indicator.actor));
        box.add_actor(this._clockDisplay);
        box.add_actor(this._indicator.actor);

        this.actor.label_actor = this._clockDisplay;
        this.actor.add_actor(box);
        this.actor.add_style_class_name ('clock-display');

in this last line this.actor.add_style_calss_name ('clock-display'); i guess i have to specify its pseudo_calss or something but i dont have any idea.

in the below image if you see the day with time stamp, it is the default behavior when Ubuntu is freshly installed.

by using Clock Override Extension, it is possible to make our own text.. like in this image..

here is a clue, this Clock Override Extension have special feature to make a next line by adding %n in its settings https://developer.gnome.org/glib/stable/glib-GDateTime.html#g-date-time-format

Clock Override Extension Details: https://extensions.gnome.org/extension/1206/clock-override/

Question: i am looking to configure both lines independently in .css file to choose the colors, heights, weights, shadows, borders etc.

is it achievable?

from .css file, ::first-line not possible. how to achieve this? Ubuntu 18.04