The asterisk (*) mark not visible for the mandatory/required fields.

Adding a patch to resolve this issue. Please check and verify. Moving to + Needs review.

After patch:

Applied patch#2 it is working fine but the asterisk mark looks stretched we can fix it by providing the same height and width

.form-required:after {
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI0VFMDAwMCIgIGQ9Ik0wLDcuNTYybDEuMTE0LTMuNDM4YzIuNTY1LDAuOTA2LDQuNDMsMS42ODgsNS41OSwyLjM1QzYuMzk4LDMuNTUzLDYuMjM3LDEuNTQ0LDYuMjIsMC40NDdoMy41MTEgYy0wLjA1LDEuNTk3LTAuMjM0LDMuNi0wLjU1OCw2LjAwM2MxLjY2NC0wLjgzOCwzLjU2Ni0xLjYxMyw1LjcxNC0yLjMyNUwxNiw3LjU2MmMtMi4wNSwwLjY3OC00LjA2LDEuMTMxLTYuMDI4LDEuMzU2IGMwLjk4NCwwLjg1NiwyLjM3MiwyLjM4MSw0LjE2Niw0LjU3NWwtMi45MDYsMi4wNTljLTAuOTM1LTEuMjc0LTIuMDQxLTMuMDA5LTMuMzE2LTUuMjA2Yy0xLjE5NCwyLjI3NS0yLjI0NCw0LjAxMy0zLjE0Nyw1LjIwNiBsLTIuODU2LTIuMDU5YzEuODcyLTIuMzA3LDMuMjExLTMuODMyLDQuMDE3LTQuNTc1QzMuODQ5LDguNTE2LDEuODcyLDguMDYyLDAsNy41NjIiLz48L3N2Zz4K);
   background-size: 8px 8px;
   content: "";
   display: inline-block;
   vertical-align: super;
   line-height: 1;
   height: 8px;
   width: 8px;
  }

Thanks

Hi
On my local system, patch number #2 is not applying. However, after adding the code and manually incorporating the code changes from comment #4, the asterisk mark is displaying correctly.

Tested - https://www.drupal.org/files/issues/2023-09-15/3387496-2.patch →
Testing Comments:
After applying the patch this issue is fixed. Tested the mentioned fields as well as added some more other fields to check (*) sign for the fields which are set as required and it is working for those fields also.
Status - PASS

Hi @sdhruvi5142
If testing is passed, please change status from Needs Review to RTBC.

Thanks

We don't need and shouldn't use an SVG here— core and other themes simply use an asterisk. Here is an example of how Gin theme handles it:

.form-required::after {
  content: "*";
  color: var(--gin-color-danger);
  line-height: 1;
  margin-right: .15em;
  margin-left: .15em;
  vertical-align: text-top;
  background: none;
}

Preeti.chawla → made their first commit to this issue’s fork.

I have created new patch with proposed solution in last comment to resolve the issue. Please review

Issue fixed. Please review MR !13 above,

Verified MR13 on 10.2.x, the asterisk is added and looks fine. RTBC++

Hi
Verified MR13! and the fixes are working as expected.

Testing Steps followed:
1. Install Bulma theme with Drupal 10.
2. Install and enable the Web from module.
3. Create a form with some required fields. Changes observed here.

Testing result:
The asterik(*) are being properly working as expected for the required fields.

Status : PASS
Attaching SS for reference.

This is fixed more generically and not only for webform in ✨ Add asterisk to webform required fields Fixed . Can folks here confirm, testing either supported dev release (1.x or 3.x)?