Less Befehl wird nicht umgesetzt

Shopware 5 Themes & Design
1

Hallo,

ich hoffe es kann mir wer helfen.Ich würde gerne die Page-Header mit einer kleinen Unterstreichung versehen. Dazu habe ich den ::after-Tag per less deffiniert.Mit folgendem Code:

	.page-header {
		border: 0 none;
		color: #233e47;
		display: block;
		font-weight: 700;
		letter-spacing: 1px;
		margin-top: 0;
		margin-bottom: 30px;
		padding: 0;
		text-align: center;
		text-transform: uppercase;
		widht: 100%;
			::after {
				border-bottom: 1px solid #e5e6e9;
				content: '';
				display: block;
				left: calc(50% - 45px);
				margin-top: 8px;
				position: absolute;
				width: 90px;
				text-align: center;
		}
	}

 

ich versuche es jetzt schon Stunden, aber es funktioniert nicht. Statt

left: calc(50% - 45px);

wird im frontend immer nur

left: calc(5%);

ausgegeben. Was ist in meiner Less-Datei falsch?

Danke für hoffentliche Hilfe,

Jozi

2

schonmal folgendes probiert:

left: ~"calc(50% - 45px)";

Ansonsten gabs da nicht irgendwelche unitize funktionen in Shopware?

3

Mal abgesehen davon Du hast da widht statt width stehen.

4

Du darfst außerdem

.bla {
    :after {}
}

nicht mit

.bla {
    &:after {}
}

verwechseln.

Schau dir doch das generierte css vorher mal an.

Viele Grüße