Question on counter

[waynepatt58]

Need some advice. I am setting up a counter and I want to put some text to the right of it with an underline as in the picture.

All these are in one column, is this possible and how would I do it?

[lely]

Hello @waynepatt58,

Using V2 Counter elements:

Add the text on TEXT BELOW field

On the Customize Tab > Element CSS:

Add this:

$el.x-counter >div {
    display: inline-block;
}
$el.x-counter >div.x-counter-after {
    margin-left: 20px; /*Adjust this value accordingly*/
}

To underline the text:

Hope this helps.

[waynepatt58]

Many thanks for the quick reply. I followed your exact instructions but the text would not go to the right hand side of counter.

[rad]

Hi @waynepatt58,

That text feature is meant for top and below the counter, you could try adding the suffix instead. Then just use CSS to implement space in between them.

$el .x-counter-number-suffix {
margin-left: 25px;
}

Thanks!

[waynepatt58]

Thanks, although hat put the text to the right of count I had no control over text size as I needed it smaller than counter. If you go to top of this post you will see what I was trying to achieve. I believe after checking code that was done with flex box. Do both versions of xtheme use flex box?

[paul.r]

Hi @waynepatt58,

You can change the text size using css.
In the code that was provided by my colleague, you can add font-size

For example

$el .x-counter-number-suffix {
    margin-left: 25px;
    font-size:15px !important;
}

Change 15px to adjust.

Hope this helps