css - content unterschiedlich gestalten

ich habe per css content: zwei Zeilen in meine Seite "eingebaut". Mittels \A trenne ich die Zeilen voneinander. Wie kann ich die oberste Zeile anders gestalten als die untere, hinsichtlich Schriftart, -grad und-farbe?

Der hier verwendete Code

<html> <head> <style> *{ margin:0; padding:0; } body{ background:#123456; height:100vh; width:100vw; display:flex; justify-content:center; } main{ display:flex; flex-direction:column; align-items:center; align-self:center; white-space: pre-wrap; } main:before{ content: "''Sollen Sie doch!''"; color:black; font-size: 4em; background:white; font-family: Lato; border-radius: 30px; padding:3px 20px; } main:after{ content: "M. Linne zu L. Minne."; color:white; font-size: 3em; font-family: Lato; background:black; border-radius: 30px; padding:3px 20px; margin-top:10px; } </style> </head> <body> <main></main> </body> </html>