troubleshooting(dialog): Dialog title :before psuedo element

[tony-molumby]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

We are doing a migration to Material Angular 16 and when attempting to style the mat-dialog-title of a dialog. There is a :before pseudo element which has an empty string as content, and I believe the purpose of this element is to set the height of the title element with the mat-dialog-title directive. Is this correct? This implementation seems very hacky to me and flexbox justify-content does not work property because this pseudo element is considered an element within a flex container, and therefore the developer either needs to create a new flex container within the mat-dialog-title or remove the content from the :before psuedo element. Am I not not thinking of this correctly and is there another way to use justify-content which works with this psuedo element?

Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

Expected Behavior

If the mat-dialog-title container is a flex container, justify-content: space-between works correctly.

Actual Behavior

justify-content: space-between adds space between the psuedo element which has an empty string as content and the next element within the mat-dialog-title

Environment

• Angular: 16.2.10
• CDK/Material: 16.2.9
• Browser(s): Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[ronan-connolly]

This works for now to remove the ::before element:

.mat-mdc-dialog-title::before {
  content: none; /* This removes the ::before pseudo-element */
}

[AnkitaSood]

.mat-mdc-dialog-title::before {
  display: inline-block;
  width: 0;
  height: 40px;
  content: "";
  vertical-align: 0;
}

The height of 40px on the pseudo element adds unnecessary spacing on the title. Unsure what is the purpose of this pseudo element any more, specially now that we are handling the spacing with tokens in v19.