# Add custom unit like m2 or % after number field wit css

**URL:** <https://community.gravityforms.com/t/add-custom-unit-like-m2-or-after-number-field-wit-css/19242>\
**Category:** Get Help\
**Created:** [April 16, 2025, 7:05pm UTC](https://community.gravityforms.com/t/add-custom-unit-like-m2-or-after-number-field-wit-css/19242 "2025-04-16T19:05:46Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![user5da84ac592673520](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/user5da84ac592673520/32/1086_2.png) [@user5da84ac592673520](https://community.gravityforms.com/u/user5da84ac592673520)\
**Post date:** [April 16, 2025, 7:05pm UTC](https://community.gravityforms.com/t/add-custom-unit-like-m2-or-after-number-field-wit-css/19242/1 "2025-04-16T19:05:46Z")

</div>

I search for an hour now to find a help file or discussion here how to add a % or ‘kWh’ after the number in the number field., but could not find it anymore.. Anyone?

Its something like:

```auto
.class-name:after {
     content:'kWh'
}

```

but the text is below the number field. what I try with marges, it does not work.

---

<div class="post-metadata">

**Author:** ![david](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/david/32/2517_2.png) [@david](https://community.gravityforms.com/u/david)\
**Post date:** [April 16, 2025, 9:57pm UTC](https://community.gravityforms.com/t/add-custom-unit-like-m2-or-after-number-field-wit-css/19242/2 "2025-04-16T21:57:51Z")

</div>

Do you have a visual of what you’re after? Do you want it to appear inline with whatever is entered in the field or just inside the input aligned to the right?

---

<div class="post-metadata">

**Author:** ![user5da84ac592673520](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/user5da84ac592673520/32/1086_2.png) [@user5da84ac592673520](https://community.gravityforms.com/u/user5da84ac592673520)\
**Post date:** [April 17, 2025, 8:52am UTC](https://community.gravityforms.com/t/add-custom-unit-like-m2-or-after-number-field-wit-css/19242/3 "2025-04-17T08:52:05Z")

</div>

Hi David,  
its on accept site so I cannot share URl yet.

the calculated fiueld has a css selector: ‘calculation\_kWh’  
when doing an ::after correct like  
`.calculation_kWh::after`  
its shown not after

 ![2025-04-17_10h32_38](https://us1.discourse-cdn.com/flex020/uploads/gravityforms1/original/3X/1/e/1e975a3b43f76adf3822b14152d2bc1a0501f28a.png)

Now I add a space like: `.calculation_kWh ::after`  
Now its shown in the right place but it doubles now: its also in the sentence above the field…

 ![2025-04-17_10h38_01](https://us1.discourse-cdn.com/flex020/uploads/gravityforms1/original/3X/b/4/b4cb6f4736dfa923d8775a9bbe44f89b3ccd7bf6.png)

Should I use another class id just for the number field?

the css:

```auto
.calculation_kWh input {
    margin-top: 15px;
    font-size: 20px;
  background-color: #f5e9d2 !important;
border: 0.9px solid !important;
	border-radius: 4px;
	border-color: #181a19;
    padding: 10px !important;
    font-size: 1em !important;
  
}
.calculation_kWh::after {
     content:'kWh';
    font-size: 1em;
margin-left: -80px;
  color: black; 
 
}

```

---

<div class="post-metadata">

**Author:** ![toothless](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/toothless/32/15995_2.png) [@toothless](https://community.gravityforms.com/u/toothless)\
**Post date:** [April 18, 2025, 12:19pm UTC](https://community.gravityforms.com/t/add-custom-unit-like-m2-or-after-number-field-wit-css/19242/4 "2025-04-18T12:19:14Z")

</div>

Hi Keesjan,

Could you please share your webpage URL so we can take a closer look and assist you?

---

<div class="post-metadata">

**Author:** ![david](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/david/32/2517_2.png) [@david](https://community.gravityforms.com/u/david)\
**Post date:** [April 18, 2025, 6:20pm UTC](https://community.gravityforms.com/t/add-custom-unit-like-m2-or-after-number-field-wit-css/19242/5 "2025-04-18T18:20:02Z")

</div>

> [@user5da84ac592673520](#):
>
> ```auto
> .calculation_kWh::after {
> content:'kWh';
> font-size: 1em;
> margin-left: -80px;
> color: black; 
>  
> }
> 
> ```

Looks like you’re pretty close here! Try tweaking this bit to:

```auto
.calculation_kWh .ginput_container::after {
     content:'kWh';
    font-size: 1em;
margin-left: -80px;
  color: black; 
 
}

```

This should scope that text to only show up after the input.

---

<div class="post-metadata">

**Author:** ![user5da84ac592673520](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/user5da84ac592673520/32/1086_2.png) [@user5da84ac592673520](https://community.gravityforms.com/u/user5da84ac592673520)\
**Post date:** [April 22, 2025, 2:22pm UTC](https://community.gravityforms.com/t/add-custom-unit-like-m2-or-after-number-field-wit-css/19242/6 "2025-04-22T14:22:02Z")

</div>

yes @david that did the trick! Still learning…

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex020/uploads/gravityforms1/original/2X/f/fef63f0599c45e0218c30d9f5d7ca8bff9b00189.png) [@system](https://community.gravityforms.com/u/system)\
**Post date:** [May 22, 2025, 2:22pm UTC](https://community.gravityforms.com/t/add-custom-unit-like-m2-or-after-number-field-wit-css/19242/7 "2025-05-22T14:22:44Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.