Tile Counter display issue

[gilded scroll]

I am new to Home Assistant and am a week away from a 4 week sabbatical to jump down this rabbit hole. I've been working with some ideas in advance and ran into a display issue. I'm on HA 2025.3.4 using a Tile card for a Counter with the new Counter feature. With a bit of work, it looks like I can combine on/off function of a device and counting cycles into a single control.

The value of the counter appears on a 2nd line below the Name. Is it possible (future tweak?) to have it appear to the right of the Name? It would save space and avoid a display issue that drove me nuts. Part of the Name and Value were cut off. I later realized it was due to my Accessibility settings making the font larger so it's easier to read.Nothing else in HA has been an issue until this. I changed to a normal font and it was resolved, but with the Value to the right of the Name I could have my control and read it too.

[summer glen]

i am not sure what your getting at. can you show a screenshot and also share the card yaml of what you currently have?

[gilded scroll]

The larger font on the device causes the display to cut off text. If the counter (2) were to the right of the "Cold valve" then the font size would be good.

[summer glen]

do you have card_mod installed?

[summer glen]

1. install card_mod if you dont have it already
2. change hide_state to true to get rid of the 2nd line
3. add this section to the bottom

  style:
    ha-tile-info$: |
      .primary:after {
        visibility: visible;
        content: ": {{ states('counter.laundry_washer_cold') }}";
      }

that will append : X to the end of the primary text where X is the value of the counter

you can adapt as needed but hopefully you see what is happening

[gilded scroll]

That fixed it. Thanks! Now I can keep my larger font on the device and use this approach.